javascript - React EsLint-组件应被编写为纯函数，将其更改为纯函数后将无法再读取该属性

所以在按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）形式中，您将收到prop作为参数：

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>