Question

我有兴趣将一组反应Component传递为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 docs。

将一组组件定义作为props传递给react

1 个答案: