Question

我正在使用反应，我遇到了问题。

我有一个组件需要接受另一个组件作为prop，并将其他组件传递给同一个组件。例如：

export default class Item extends React.Component {
    render() {
        return (<div onClick={this.props.onClick}>Some content.</div>)
    }
}

Item.propTypes = {
    onClick: PropTypes.func.isRequired
}

export default class Container extends React.Component {
    onClick() {
        // Do something.
    }
    render() {
        // render here the item and passing it my onClick method.
    }
}

Container.propTypes = {
    item: PropTypes.element.isRequired
}

编辑：所以我可能会使用es5语法并执行以下操作：

React.createElement(item, {
    onClick: this.onClick
});

但我怎样才能在es6中实现这一目标？

Answer 1

这是你需要做的，如果你需要传递所有道具，你也可以使用传播运营商。

defStyleRes

Answer 2

您需要传入Container，Item组件类型和要分配的道具而不是实例。这样您就可以在创建实例之前添加更多道具

然后你可以这样做：

class Container extends React.Component {
    static propTypes = {
        ItemType: PropTypes.func.isRequired,
        itemProps: PropTypes.object.isRequired,
    };

    onItemClick = () => {
       // do something
    };

    render() {
        const { ItemType, itemProps } = this.props;
        return <ItemType {...itemProps} onClick={this.onItemClick} />;
    }
}

class MyDisplay extends React.Component {
    render() {
        const ItemToRender = someCondition ? Item : AnotherItem;
        return <Container ItemType={ItemToRender} itemProps={{a: 1, b: 2}} />;
    }
}

React - 将道具传递给在道具中收到的组件

2 个答案: