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錯誤說組件應該寫成純函數，我嘗試將其更改為純函數，如down bellow

    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>
);

這將在這里的文檔中介紹。 這是一個簡單的可運行示例：

 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>