Question

我有多个反应成分; 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

现在，我的问题是，我可以将组件作为道具传递，就像我使用array_list传递它们一样，我知道可以使用this.props.child来完成。但这里的需求是不同的，我需要一个不同的组件用于不同的array_list。

另一个问题：我可以渲染一系列组件，例如我使用contentData完成的。

感谢您的回复。

Answer 1

一个干净的解决方案根本不是直接传递组件，而是只能在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} />
)

如何将多个组件传递给另一个组件

1 个答案: