在反應中將道具從父組件傳遞給子組件

Question

我正在嘗試使用該行代碼將屬性從父組件傳遞給子組件：

const isPermitted = ["permitted","not-permitted"]

    const sideBar = [
        {
            id: 0, name: "Dashboard", icon: dashboard, path: `${url}/dashboard`, exact: true,
            component: () => <Dashboard isPermitted={isPermitted} />
        },

--編輯：這里是我如何循環我的側邊欄數組來呈現我的路線：

{sideBar.map((route, index) => (
            <Route
                key={index}
                path={route.path}
                exact={route.exact}
                component={route.component} />
            ))}

這里的問題是，每當我轉到儀表板組件並嘗試控制台日志（道具）時，它總是顯示一個空對象，而不是相應地顯示數組及其內容。 為什么會發生這種情況，我該如何解決？ 提前致謝。

Answer 1

嘗試使用render prop 而不是component 。

render: props => <Dashboard {...props} isPermitted={isPermitted} />

鑒於您的路線創建涉及map ：

{sideBar.map((route, index) => {
  const Component = route.component;

  return (
    <Route
      key={index}
      path={route.path}
      exact={route.exact}
      render={props => <Component {...props} isPermitted={isPermitted} />} />
  );
})}