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>
    )
}

希望这有帮助！

动态构图反应

1 个答案: