Question

想知道是否可以将组件传递给属性，如下所示

ReactDOM.render(
    <ContainerBox anotherComponent={<AnotherComponent />} />, document.body);

然后知道ContainerBox我希望以下列方式传递AnotherComponent一个属性。

class ContainerBox extends React.Component {
    clickHandler() {
         //does something fun
    }

    render () {
        return (
            this.props.anotherComponent(this.clickHandler) //<----- is it possible to pass properties from here?
        );
   }
}

是否可以从该位置将ContainerBox传递给AnotherComponent？

ContainerBox有一个clickHandler function我想传递给AnotherComponent。如果我将<AnotherComponent />移到render()内，则可以这样做。但是，如果不首先复制整个ContainerBox，我就无法将ContainerBox重用于其他组件。

有意义吗？希望你能理解。

更新代码示例

Answer 1

是的，这是可能的。但是，这样做更常见

    ReactDOM.render(
    <ContainerBox><AnotherComponent /></ContainerBox>, document.body);

在ContainerBox中

class ContainerBox extends React.Component {
    render () {
        return (
            this.props.children
        );
   }
}

了解更多关于在此反应this.props.children：https://facebook.github.io/react/docs/multiple-components.html#children

编辑：

我只是想指出，在这个例子中，我们没有传递一个组件，而是一个元素（渲染组件的结果）。

也可以传递组件，如下所示：

<Foo buttonComponent={FancyButtonComponent} />

和Foo：

render() {
    Button = this.props.buttonComponent;
    return (
        <div>
            ...
            <Button />
        </div>
    );
}

reactjs - 是否可以将属性传递给组件，如下所示？

1 个答案:

编辑：