如何解決組件應該寫成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,
}

Answer 2

您也可以嘗試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; 

Answer 3

我使用一些假道具來繞過這個錯誤：

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,
};