對React PrivateRoute語法{}感到困惑

Question

我是React的新手。 我現在正在研究React Router，看到許多人使用PrivateRoute組件來處理用戶身份驗證頁面。 但是，我對語法和對該功能的理解感到困惑。

export function PrivateRoute({ component: Component, authed, ...rest }) {
 return (
    <Route {...rest}
        render={
            (props) => authed ? <Component {...props} /> : <Redirect to={{ pathname: 'login', state: { from: props.location } }} />
        }
    />
 )
}

它的用法如下

< PrivateRoute authed={this.props.isAuthenticated} path="/profile" component={MyProfile} />

我可以知道為什么我們將所有參數都包裝在{}中嗎？{{component：component，authed，... rest}？
以及為什么我們這樣使用“組件：組件”？ 是用於break component = {MyProfile}嗎？ 但是為什么我們這樣寫？ （道具）和...道具是什么？

... rest是path =“ / profile”和其他參數，例如'exact'對嗎？

非常感謝！

Answer 1

我可以知道為什么我們將所有參數都包裝在{}中嗎？{{component：component，authed，... rest}？

這是一種JavaScript語法，稱為解構分配。 這是從數組和對象中解包值的一種非常方便的方法。

假設您的函數期望一個帶有id鍵的對象。 您編寫function(myObject) { return myObject.id; } function(myObject) { return myObject.id; } 。 通過解構，您可以編寫function({id}) { return id; } function({id}) { return id; } 。 並期望傳遞的對象將被分解為請求的鍵。

（道具）和...道具是什么？

首先，已知...是傳播算子。 這是將數組或對象擴展到需要參數或元素的地方的另一個方便快捷方式。

其次， (props)是箭頭函數聲明的一部分。 注意，它后面跟隨着一個箭頭： (props) => 。 這與編寫function(props) 。 但是，箭頭函數和function關鍵字之間存在一些細微的差異，主要是this關鍵字所指的含義。

還要注意， (props) =>之后是隱式返回。 您可以使用顯式的return編寫這樣的箭頭函數(props) => { return true;} 。 或不帶括號的隱式返回，例如： (props) => true 。

Answer 2

我可以知道為什么我們將所有參數都包裝在{}中嗎？{{component：component，authed，... rest}？

這是JavaScript語法，但是，以最初描述的方式編寫React函數組件通常是開發人員的偏愛或編碼風格指南的決定。 讓我們進一步分解您的問題。

component: Component ：這是分解函數參數（ component ）並將其分配給新變量名（ Component ）的簡寫。 注意我們這樣做是因為React需要組件名稱以大寫字母開頭。

...rest ：這是我們如何處理傳遞給此函數的任意數量的其他參數（稱為rest參數）的方式。 可以這樣想：“將所有剩余的函數參數收集到一個值（ rest ）中，我們以后可以在函數中使用它。在React中，將prop傳遞到組件樹中是很常見的。

編輯：

• reactpatterns.com有一些有用且簡潔的示例。

參考文獻：

• MDN破壞分配
• MDN-Spread語法
• 深入反應Docs-JSX