Question

我正在寻找一种将组件数组传递给Tab组件的prop的方法。只是想知道是否有可能。

因此，我需要创建一个组件，该组件将缩短材料ui的制表方法，但是我找不到一种将组件数组作为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：提供的子级之一无效：null。我们期待一个有效的React元素

当我console.log组件返回时： {$$ typeof：Symbol（react.element），类型：ƒ，键：null，ref：null，props：{…}}对象需要帮助

我希望它可以渲染组件。

Answer 1

因为您需要在地图中返回一个值。

map(components, component=>{

 return <TabContainer>{component}</TabContainer>

}

Answer 2

组件的名称必须以大写字母开头，但在这里ArrayList<HashMap<String, Object>> students_list = new ArrayList<HashMap<String, Object>>(); for (int i=0; i<3; i++) { HashMap<String, Object> student = new HashMap<String, Object>(); student.put("Name", "James"); student.put("id", i); student.put("Level", "Two"); System.out.println("The student details are "+student); students_list.add(student); } System.out.println("List of students list is "+students_list.toString());却不是。因此，您必须将components = [<component1/>, <component2/>]转换为[<component1/>, <component2/>]。第二件事，我发现您的[<Component1/>, <Component2/>]语法很奇怪，一定是这样的：

map

参考：https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

Answer 3

您的es6语法需要进行细微调整才能返回react组件。

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

或者，如果可以从阵列中使用map函数，而不是从库中导入。

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

Answer 4

我通过另一个实现解决了这个问题。

我使用了“ react-swipeable-views”，而是通过了一个我使用过的组件

       <SwipeableViews
            axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
            index={this.state.value}
            onChangeIndex={this.handleChangeIndex}
        >
            { children }
        </SwipeableViews>

并更改：

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

收件人

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

但是，如果您能获得如何通过道具传递组件的话，那就太好了！

Answer 5

我认为您必须将FullWidthTab的数组上的组件作为节点值传递：

<FullWidthTab
components = [component1, component2] //this is where components renders
 MenuLabels = ['Menu1', 'Menu2'] //this is where title 
render
/>

您的地图照原样继续。

如果这不起作用，请尝试在地图内渲染组件。将组件作为FullWidthTab的节点传递，然后呈现它：

map(components, component=>{

 <TabContainer>{<component/>}</TabContainer>

}

注意：此代码未经测试！

在React中传递一组组件作为道具

5 个答案: