![](/img/trans.png)
[英]ESLint - Component should be written as a pure function (react prefer/stateless function)
[英]how to solve Component should be written as a pure function error in eslint-react?
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应该写成一个纯函数。
那么如何将上面的组件改为纯函数呢?
谢谢你的帮助。
如果你有一个“哑”组件(没有内部状态,生命周期方法等),你可以把它写成一个简单的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,
}
您也可以尝试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;
我使用一些假道具来绕过这个错误:
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,
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.