如何解决`组件应该写成一个纯函数`eslint-react中的错误？

问题描述：

class Option extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleClickOption = this.handleClickOption.bind(this); 
    } 
    handleClickOption() { 
    // some code 
    } 
    render() { 
    return (
     <li onClick={this.handleClickOption}>{this.props.option}</li> 
    ); 
    } 
}

我使用eslint-config-airbnb来检查上面的代码，它显示一个错误消息，如Component should be written as a pure function。如何解决`组件应该写成一个纯函数`eslint-react中的错误？

那么如何将上面的组件改为纯函数呢？

感谢您的帮助。

答

React 0.14引入了纯函数组件。

这应该是所有无状态组件的首选选项。

function Option({ onClick, option }) { 
    return (
     <li onClick={onClick}> 
      {option} 
     </li> 
    ); 
}

尽管点击处理程序是问题中组件的一部分，但还是有一个dfference。 – flq

大多数情况下，您最好在更高级别定义点击处理程序。或者，您可以在同一个文件中使其成为一个单独的函数。 –

答

我有类似的问题。有没有人知道如何在传递的点击函数中调用组件特定的道具。

E.g.

function ElementRow({onClick, element, key}) { 
    return (
    <tr key={key}> 
     <td><a href="#" onClick={onClick}>Delete</a></td> 
     <td> 
     ... 
     <td>{ element.first } { element.last }</td> 
    </tr> 
); 
}

里面的onClick功能我需要element.id。我正在寻找一个解决方案，而不使用bind()

我知道如何使它与React.createClass或extend React.Component一起工作，但不是纯粹的函数。

编辑：找到了一个解决方案，但我不知道它是否是代码味道。 :)

function ElementRow({ onClick, element, key }) { 
    const _onClick = (e) => { 
    onClick(e, element.id); 
    }; 

    return (
    <tr key={key}> 
     <td><a href="#" onClick={_onClick}>Delete</a></td> 
     <td> 
     ... 
     </td> 
     <td>{ element.first } { element.last }</td> 
    </tr> 
); 
}

在这种情况下，您可能需要内联onClick = {（event）=> onClick（event，element.id）}'函数。或者，考虑在更高级别（即父组件）定义onClick事件。将来，如果你有问题，请开始一个新的线程，而不是在现有的问题上提出问题。 –

你是对的，下一次我会开始一个新的线程，没有把握。在这种情况下，onClick通过父组件的道具传递。我认为它的价值是用一个完整的，更具描述性的例子来开始一个新的线索。 – hyde

答

在ES6你可能会做一些与此类似：

const Option = (props) => { 

    handleClickOption() { 
     // some code 
    } 

    return (
     <li onClick={this.handleClickOption}>{this.props.option}</li> 
    ); 
}; 

Option.propTypes = { 
    // validate props 
}; 

export default Options;

与您的特定解决方案无关，但更多的是对这种编码风格的一般回应：我不明白。为什么每次应该渲染组件时都会创建一个新的'handleClickOption'，而不是原型对象，它们都会共享相同的函数引用，但是为每次执行使用不同的上下文？似乎像JS引擎的膨胀... – Swivel

其工作罚款对我来说：D我投这个@约翰迈耶 – Vijay

答

无状态的功能组件将受益于未来特定做出反应对这些组件的性能优化。以下是我们可以编写组件作为纯函数的方式：

const App =() => { 
 
    return (
 
    <div> 
 
     <h2 id="heading">Hello ReactJS </h2> 
 
     <header /> 
 
    </div> 
 
); 
 
}; 
 

 
export default App;

但是，如果你想要写在ES6风格的组成部分，你仍然可以做，但在这种情况下，eslint错误需要是删除（如果您使用eslint）。在.eslintrc文件中的以下变化

E.G：

"rules": { 
 
    "react/prefer-stateless-function": "off" 
 
}

然后你就可以用eslint写在这里ES6风格组件启用：

import React, { Component } from 'react'; 
 

 
class Home extends Component { 
 
    render() { 
 
    return (
 
     <header className="header"> 
 
     <h1>Home page</h1> 
 
     </header> 
 
    ); 
 
    } 
 
} 
 

 
export default Home;

如何解决`组件应该写成一个纯函数`eslint-react中的错误？

相关推荐