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）表单中，您将道具作为参数接收：

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>

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

1 个答案: