1
我有多个反应组件; component_1, component_2, component_3
如何在反应中将多个组件传递给另一个组件
,我想里面component_4
使用我也有一个array_list:
array_list = [
{
data: [{}, {}],
renderMenu: component_1
}, {
data: [{}, {}],
renderMenu: component_2
}, {
..etc
}
]
我Component_4是这样的:
import componet_1 from 'component_1'
import componet_1 from 'component_2'
import componet_1 from 'component_3'
//next I populate the item_array here
const array_list = [
{
data:[{},{}],
renderMenu:component_1
},
{data:[{},{}],
renderMenu:component_2
},
{..etc}
]
class component_5 extends Component{
render(){
<component_4 {...array_list}/>
}
}
我试图用它我component_4内:
class component_4 extends Component{
constructor(props){
super(props)
}
render(){
const {array_list} = this.props
var contentData = [];
array_list.forEach(function(item, index, array){
console.log(item);
item.data.forEach(function(item1, index, array){
console.log(item.renderComponent);
contentData.push(<item.renderComponent {...item}/>);
})
});
return(
<div>
<div className="ui four column centered grid">
{contentData}
</div>
</div>
)
}
}
export default component_4
Now ,我的问题是,我可以传递组件作为道具,如我使用array_list
传递它们,我知道它可以使用this.props.child完成。但这里的需求是不同的,我需要一个不同的组件用于不同的array_list。
另一个问题: 我可以渲染一个组件阵列吗,就像我用contentData
所做的那样。
感谢您的回复。
1)它是由你,如何通过组件。 2)对于'const {array_list} = this.props',你应该定义prop'array_list = {array_list}',而不是'{... array_list}'3)是的,你可以渲染组件数组,例如http:/ /stackoverflow.com/questions/38622714/dynamic-instantiation-of-child-components-by-string-name-reactjs/38627964#38627964 –
谢谢你的回应。 – nitte93user3232918