Question

我打算运行与此类似的地图：

const array=[
{

    componentName: 'ComponentOne'
},
{
    componentName: 'ComponentTwo'
},
]

<Switch>

  {array.map((object, index) => (
     <Route exact path='/correctPath'
     render={()=><object.componentName
     />}/>))}

</Switch>

我得到的错误是大小写不正确，属性的定位正确。该错误还表明该组件已正确装箱，即使它认为不是。如果我将参数'object'的所有实例更改为'Object'，即使错误显示了正确的PascalCase中的组件，我仍然会收到错误消息。有想法吗？

Answer 1

需要构造一个适当大小写的react组件，即PascalCased。另外，请勿使用保留的JavaScript关键字的变量名（大写），例如Object。

更常见的模式是在数组中存储对组件的引用。

const array= [
  { component: ComponentOne },
  { component: ComponentTwo },
];

...

<Switch>
  {array.map(({ component: Component }, index) => {
    // Uses object destructuring to get and rename the component to Component
    return (
      <Route
        exact
        path="/correctPath"
        render={() => <Component />}
      />
    );
  })}
</Switch>

React App：HashRouter中的Map在迭代组件时遇到问题

1 个答案: