reactjs - 动态组合reactjs

Question

有动态组件的组合方式吗？例如，假设我有一个 ListItems 组件，它按行显示其子项。但我想重用它的一些行为，我想做这样的事情:

<ListItems rowComponent="CarsItem" headerComponent="CarsHeader"/>

或

<ListItems rowComponent="BikesItem" headerComponent="BikesHeader"/>

我怎样才能实现这样的抽象？

类似的东西没用

    render:function(){
      return (
<this.props.header/>
<this.props.body/>

    )
    }

Answer 1

如果您可以确保首先声明了用于子级的类，您可以这样做:

<ListItems rowComponent={BikesItem}/>

然后在你的渲染方法中:

render() {
    var Row = this.props.rowComponent;
    return (
        <div>
            {this.props.items.map(function(item) {
                return <Row item={item}/>;
            })}
        </div>
    )
}

希望这对您有所帮助!