动态组合ReactJS

Question

有没有一种动态组件的组合方式？例如，假设我有一个ListItems组件，它将其子项显示在行中。但是我想重用其中的某些行为，我想做类似这样的事情：

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

或者

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

我该如何实现这样的抽象？

类似那样的东西并没有起作用。

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

    )
    }

- user237329

---

你的示例本身已经是一个可接受的解决方案。只需将字符串替换为实际的组件类即可，例如 <ListItems rowComponent={BikesItem}/>。 - Eelke

我同意Eelke的观点，那么唯一的障碍就是如何加载你的模块。 - François Richard

渲染会是什么样子？ - user237329

Answer 1

如果您能确保首先声明用于子元素的类，则可以这样做：

<ListItems rowComponent={BikesItem}/>

然后在你的渲染方法中：

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

希望这有所帮助！

- Eelke

---

值得额外提及的是，在 var Row 中，变量名称必须大写首字母。 - zerkms

在文档 https://facebook.github.io/react/docs/jsx-in-depth.html 中提到："React的JSX使用大写和小写约定来区分本地组件类和HTML标签"。 - Eelke

我知道。我的意思是，这可能对不了解此约定的OP有所帮助，并且可能会为变量赋予不遵循约定的任意名称。 - zerkms

文档参考是作为补充的，如果没有表达清楚，很抱歉 :) - Eelke