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

Question

const Header = React.createClass({
  contextTypes: {
    router: React.PropTypes.object.isRequired,
  },

  render() {
    return (
        <li className={this.context.router.isActive('a') ? 'active' : ''}>
          <Link to="/a/">A</Link>
        </li>
        <li className={this.context.router.isActive('b') ? 'active' : ''}>
          <Link to="/b/">B</Link>
        </li>
    );
  },
});

我使用eslint-config-airbnb检查上面的代码,它向我显示一个错误信息,比如Component应该写成一个纯函数.

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

谢谢你的帮助.

Answer 1

当您有一个“哑”组件（没有内部状态、生命周期方法等）时，您可以将其编写为简单的 javascript 函数，而不是使用React.CreateClass或扩展React.Component.

请查看此处的文档，了解有关纯函数作为组件的一般信息，并查看此处的文档，了解特定于context.

所以在你的情况下：

function Header(context) {
  return (
    <li className={context.router.isActive('a') ? 'active' : ''}>
      <Link to="/a/">A</Link>
    </li>
    <li className={context.router.isActive('b') ? 'active' : ''}>
      <Link to="/b/">B</Link>
    </li>
  );
}

Header.contextTypes = {
  router: React.PropTypes.object.isRequired,
}