将一系列组件定义作为React中的道具

Question

我有兴趣将一系列react Component s作为 props

export default class Table extends React.Component {
    render() {
        return (
            ...
            {this.props.actions ? <td>{
                this.props.actions.map((f, k) => f(r, k))
                }</td> : ''}
            ...
        )
    }
}

const actions = [
    (row, index) => <RemoveTableAction row={row} key={index}/>
    (row, index) => <EditTableAction row={row} key={index}/>
]
<Table ... actions={actions} />

您在此示例中可以看到，对于我要显示的每个操作，我需要手动实例化组件并手动通过row和index。

我想仅通过组件定义并在Table组件中处理所有这些逻辑。

const actions = [RemoveTableAction, EditTableAction]
map((compDef, k) => <compDef key={k} row={r}/>)

如何在Table组件中实例化这些组件？

Answer 1

就像您这样做

一样

map((CompDef, k) => <CompDef key={k} row={r} />)

确保地图内的 compdef 变量以大写字母

开始

edit

这是一个更好的解决方案，可以为这两个组件提供灵活性（随心所欲）

const actions = [<RemoveTableAction />, <EditTableAction />];
<Table ... actions={actions} />

和table.js：

export default class Table extends React.Component {
    render() {
        return (
            ...
            {this.props.actions ? <td>{
                this.props.actions.map(
                    (action, k) => 
                        react.cloneElement(action, {row: r, key: k})
                )
            }</td> : ''}
            ...
        )
    }
}

这样，我们可以克隆元素并覆盖或添加一些道具。不，没有认真的表现开销。

有关更详细的文档，请查看React文档。