![](/img/trans.png)
[英]ESLint - Component should be written as a pure function (react prefer/stateless function)
[英]React EsLint - Component should be written as pure function and after changed it to pure function can't read the property anymore
所以我将这个简单的类改为纯函数,因为eslint告诉我这样做
class user extends Component {
render(){
return(
<Aux>
<UserTable title="User" type="user" role={this.props.location.roleAction}/>
</Aux>
)
}
}
export default user;
然后我得到了eslint错误说组件应该写成纯函数,我尝试将其更改为纯函数,如down bellow
const user = () => (
<Aux>
<UserTable title="User" type="user" role={this.props.location.roleAction} />
</Aux>
);
export default user;
并且在将其更改为箭头功能后,我无法读取this.props.location.roleAction我收到错误“无法读取属性”位置“未定义”。为什么会发生这种情况? 任何修复错误的解决方案,以便我可以使用箭头功能并能够读取属性。 当我使用以前的书面组件时,它工作正常。
任何帮助都会非常感激。
在纯函数(“无状态功能组件”或SFC)表单中,您将接收道具作为参数:
const user = props => ( // <−−−− Here
<Aux>
<UserTable title="User" type="user" role={props.location.roleAction} />
^−−−−−− no `this` here since it's
a parameter
</Aux>
);
这将在这里的文档中介绍。 这是一个简单的可运行示例:
const Example = props => ( <div>{props.text}</div> ); ReactDOM.render( <div> <Example text="one" /> <Example text="two" /> </div>, document.getElementById("root") );
<div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.