Question

我正在使用react-router-dom并从像这样的数组中动态生成路由

路线数据

const routes = [
  {
    path: '/',
    exact: true,
    component: () => <MyComponent />
  }
}

路线生成

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

渲染道具我发现了我可以定义的render（）道具，但即使如此，由于组件位于变量内，我该怎么做

const props = this.props;
{routes.map((route, index) => {
  return <Route
    key={index}
    path={route.path}
    exact={route.exact}
    render={(props) => <??? {...props} />
  />
})}

在路线生成过程中如何传递this.props？

Answer 1

您可以将数组更改为仅包含组件，而不是呈现组件的新功能组件，您将获得发送的道具：

const routes = [
  {
    path: '/',
    exact: true,
    component: MyComponent
  }
}

您可以将任何大写变量用作组件，因此，如果您愿意，也可以这样做：

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

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

将参数传递给动态生成的反应路线

1 个答案: