在反应中将道具从父组件传递给子组件

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