所以我有这个简单的类,然后按照 eslint 告诉我的那样将其更改为纯函数
class user extends Component {
render(){
return(
<Aux>
<UserTable title="User" type="user" role={this.props.location.roleAction}/>
</Aux>
)
}
}
export default user;
然后我收到 eslint 错误,说组件应该写成纯函数,我尝试将其更改为纯函数,如下所示
const user = () => (
<Aux>
<UserTable title="User" type="user" role={this.props.location.roleAction} />
</Aux>
);
export default user;
将其更改为箭头函数后,我无法读取 this.props.location.roleAction 我收到错误“无法读取未定义的属性“位置””。为什么会这样发生?修复错误的任何解决方案,以便我可以使用箭头功能并能够读取属性。当我使用以前编写的组件时它工作正常。
如有任何帮助,我们将不胜感激。
最佳答案
在纯函数(“无状态功能组件”或 SFC)形式中,您会收到 props 作为参数:
const user = props => ( // <−−−− Here
<Aux>
<UserTable title="User" type="user" role={props.location.roleAction} />
^−−−−−− no `this` here since it's
a parameter
</Aux>
);
这在文档中有介绍 here .这是一个简单的可运行示例:
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>
关于javascript - React EsLint - 组件应该写成纯函数并且在将其更改为纯函数后无法再读取属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50511895/