在React.js中将组件工厂传递给另一个组件的惯用方法是什么？

Question

我有一个简单的列表组件，用于呈现项目数组。项目组件具有更多功能（单击处理程序等），并且我可能希望在此列表组件中呈现不同类型的项目。

我知道更高阶的组件，但它们似乎不适用于此，因为我没有包装某些东西，而是从数组生成组件。

到目前为止，这是我接近它的方式，列表的功能组件是：

function ResultsList(props)
{
    var items = (props.items || []).map(function(item, i) {
            return <props.ItemComponent
                key={item.id}
                item={item}
                index={i}
                {...props}
            />
        });

    return (
        <ul className="results-list"
            style={{ display: items.length ? "block" : "none" }}
        >
            {items}
        </ul>
    );
}

然后在另一个组件的ResultsList方法中使用render()组件：

render: function()
{
    var items = this.generateItems();

    return (
        <div>Item count: {items.length}</div>
        <ResultsList
            items={items}
            ItemComponent={this.state.itemType == 1 ? ItemType1 : ItemType2}
        />
    )
}

在ResultsList内呈现哪种项目取决于组件的状态，因此不同的项目组件将作为道具传递到列表中。

我还可以在此render()方法中生成项目列表，然后将其作为ResultsList传递到props.children。然而，以某种方式将列表生成封装在ResultsList组件内部感觉更清晰。但我可能会离开这里。