如何在反應中添加另一個道具...道具

Question

我正在使用react-router，並創建了一個PrivateRoute組件，該組件在驗證後顯示組件，否則重定向到登錄頁面。

我想要做的是傳遞一個額外的道具（認證）在調用者指定的頂部。

我似乎無法得到正確的語法，並搜索「...道具」沒有提出任何文檔。

這裏是我的代碼：

const PrivateRoute = ({ component: Component, ...rest }) => (
      <Route {...rest} render={(props) => (
       this.state.authentication.authenticated() ? (
        <Component authentication:{this.state.authentication} {...props}/> 
       ) : (
        <Redirect to={{ 
         pathname: '/login', 
         state: { from: props.location } 
        }}/> 
       ) 
      )}/> 
     ); 

Answer 1

問題是authentication道具語法。用=代替:

<Component authentication={this.state.authentication} {...props}/> 

Answer 2

這將是就像任何其他的道具：

<Component 
    authentication={this.state.authentication} 
    {...props} 
/> 

我覺得它有助於把它們放在單獨的行很容易地看到發生了什麼。

另外，如果{...props}已經包含了一個名爲authentication鍵，那麼你可以通過把它經過重寫它：

const someProps = { 
    hello: 1 
}; 

// this.props.hello will be 2 
<Component 
    {...someProps} 
    hello={2} 
/>