javascript - React EsLint - 组件应该写成纯函数并且在将其更改为纯函数后无法再读取属性

Question

所以我有这个简单的类，然后按照 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 我收到错误“无法读取未定义的属性“位置””。为什么会这样发生？修复错误的任何解决方案，以便我可以使用箭头功能并能够读取属性。当我使用以前编写的组件时它工作正常。

如有任何帮助，我们将不胜感激。

Answer 1

在纯函数(“无状态功能组件”或 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>