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

Question

So I have this simple class before I change it to pure function as eslint told me to do

 class user extends Component {
          render(){
            return(
              <Aux>
        <UserTable title="User" type="user" role={this.props.location.roleAction}/>
              </Aux>
            )
          }
        }
    export default user;

and then I got the eslint error said that component should be written as pure function and I try to change that to pure function like down bellow

    const user = () => (
      <Aux>
        <UserTable title="User" type="user" role={this.props.location.roleAction} />
      </Aux>
    );  

export default user;

and after change it to arrow function, I can't read the this.props.location.roleAction I got an error "cannot read property "location" of undefined " .why is that could happen? any solution to fix the error so I can using the arrow function and able to read the property. it work fine when I use the previous written component.

any help would be really appreciate.

Answer 1

In the pure function ("Stateless Functional Component" or SFC) form, you receive props as a parameter:

const user = props => ( // <−−−− Here
  <Aux>
    <UserTable title="User" type="user" role={props.location.roleAction} />
                                              ^−−−−−− no `this` here since it's
                                                      a parameter
  </Aux>
);

This is covered in the docs here . Here's a simple runnable example:

 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>