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

【问题标题】：how to solve Component should be written as a pure function error in eslint-react?如何解决组件应该写成eslint-react中的纯函数错误？
【发布时间】：2016-10-02 13:52:04
【问题描述】：

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 should be written as a pure function 。

那么如何把上面的组件改成纯函数呢？

感谢您的帮助。

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

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

查看文档here 了解有关作为组件的纯函数的一般信息，查看文档here 了解特定于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,
}

【讨论】：

我尝试过，在头函数上下文中对象只有获取键和获取引用属性，路由器未定义。
你是否也包含了 Header.contextTypes 行？
是的，我包括那行。
嗯，它应该可以工作。您是否将 this.context.router 更改为仅 context.router？我已经用完整的代码更新了我的答案，我不清楚如何处理你的渲染方法
我刚刚复制了那个代码，我得到'无法读取未定义的错误的属性'isActive''，路由器也未定义。

【解决方案2】：

我使用了一些假道具来绕过这个错误：

export default class NavItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    const { router } = this.context;
    const { index, onlyActiveOnIndex, to, children } = this.props;
    const isActive = router.isActive(to, onlyActiveOnIndex);
    const LinkComponent = index ? IndexLink : Link;
    return (
      <li className={isActive ? 'active' : ''}>
        <LinkComponent to={to}>{children}</LinkComponent>
      </li>
    );
  }
}

NavItem.propTypes = {
  children: React.PropTypes.node.isRequired,
  index: React.PropTypes.bool,
  onlyActiveOnIndex: React.PropTypes.bool,
  to: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.object,
  ]).isRequired,
};
NavItem.contextTypes = {
  router: React.PropTypes.object,
};

【讨论】：

这不是最佳做法。

【解决方案3】：

你也可以试试 ES6 的方式：

const Header = (context) => (
  <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,
}

export default Header;

【讨论】：