如何在反應中將多個組件傳遞給另一個組件

我有多個反應組件; 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所做的那樣。

感謝您的回覆。

來源

2016-08-01 nitte93user3232918

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

一個乾淨的解決方案不是直接傳遞組件，而是只有一個標識符可用於Component_4將個別條目映射到不同的組件。

例如：

import React from 'react' 
import Component_1 from './Component_1' 
import Component_2 from './Component_2' 
import Component_3 from './Component_3' 

export default const Component_4 = (props) => { 
    const items = props.items.map((item) => { 
     switch (item.type) { 
      case '1': return <Component_1 {...item} /> 
      case '2': return <Component_2 {...item} /> 
      case '3': return <Component_3 {...item} /> 
      default: return null 
     } 
    } 

    return (
     <div> 
      <div className="ui four column centered grid"> 
       {items} 
      </div> 
     </div> 
    ) 
}

import React from 'react' 
import Component_4 from './Component_4' 

const items = [ 
    { 
     data: [{}, {}], 
     type: '1' 
    }, { 
     data: [{}, {}], 
     type: '2' 
    }, { 
     ..etc 
    } 
] 

export default const Component_5 =() => (
    <Component_4 items={items} /> 
)

來源

2016-08-01 15:39:02 Timo

如何在反應中將多個組件傳遞給另一個組件

回答

相關問題