Question

我想在React中实现一个列表，以便它为每个要呈现的行接收一个组件。这就是我现在所拥有的：

class List extends React.Component
{
    render()
    {
        return (<div>
            {this.props.Items.map(function(item) {
                return Object.assign({}, this.props.RowCmp, { item: item });
            })}
        </div>);
    }
}

List.PropTypes = {
    Items: ReactPropTypes.array.isRequired,
    RowCmp: React.PropTypes.object.isRequired,
};


class ListImpl extends React.Component
{
    render()
    {
        return (
            <List
                Items={[{f: 1}, {f: 2}, {f: 3}]}
                RowCmp={<div>{this.props.item.f}</div>}
            />
        );
    }
}

此实施的问题在于ListImpl我要在RowCmp中定义prop我需要指向属于List的{{1}}，但它将是已在ListImpl上下文中解决。

如何将组件定义为道具将在儿童的背景下解决道具？

[UPDATE]

将RowCmp视为List组件的模板，以呈现每一行。

Answer 1

我设法自己解决了这个问题：

class ListImpl extends React.Component
{
    render()
    {
        return (
            <List
                Items={[{f: 1}, {f: 2}, {f: 3}]}
                RowCmp={
                    class extends React.Component {
                        render() {
                            return (
                                <div>{this.props.item.f}</div>
                            );
                        }
                    }
                }
            />
        );
    }
}

在子项的上下文（而不是父项）中解析父组件的道具

1 个答案: