reactjs

Question

想知道是否可以按如下方式传递组件 a 属性

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 - 是否可以将属性传递给组件，如下所示？

reactjs - Is it possible to pass a property to a component as following?

react-jsx

编辑：

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

reactjs - Is it possible to pass a property to a component as following?

reactjs

react-jsx

编辑：

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