reactjs - 在 React 中将一组组件作为 Prop 传递

Question

我正在寻找一种将组件数组传递给选项卡组件的 Prop 的方法。只是想知道这是否可能。

所以我需要创建一个组件来缩短 Material ui 的 tabbing 方法，但我找不到一种方法来传递组件数组作为 prop 以便它会在该组件上呈现。

这是我的代码示例:

<FullWidthTab
components = [<Component1/>, <Component2/>] //this is where components renders
 menuLabels = ['Menu1', 'Menu2'] //this is where title render
/>

我像这样将它们映射到我的代码上，并使用了 lodash map 方法:

map(components, component=>{

 <TabContainer>{component}</TabContainer>

}

但它返回这个。
警告:react-swipeable-view:提供的 child 之一无效:null。
我们期待一个有效的 React 元素

当我 console.log它返回的组件:
{$$typeof: Symbol(react.element), type: ƒ, key: null, ref: null, props: {…}} Object 需要帮助

我希望它可以渲染组件。

Answer 1

组件的名称必须以大写字母开头，但我可以在这里看到components = [<component1/>, <component2/>]它们不是。所以你必须转换 [<component1/>, <component2/>]至 [<Component1/>, <Component2/>] .第二件事我看到你的 map语法很奇怪，一定是这样的:

components.map(component => (<TabContainer>{component}</TabContainer>))

引用: https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized