如何将组件作为道具传递给React JS中的另一个组件？

Question

我有一个这样的组件

<ReactSuperSelect placeholder="Nothing Selected" 
                        clearSearchOnSelection={true}
                        deselectOnSelectedOptionClick={true}
                        dataSource={testData}
                        multiple={true}
                        onChange={this.handlerExample} 
                        keepOpenOnSelection={true}
                        searchable={true} />

我将其分配给变量并作为props传递，但它像字符串一样显示在其中。 如何实现呢？

Answer 1

您需要如下声明组件

const myComponent = <ReactSuperSelect placeholder="Nothing Selected" 
                    clearSearchOnSelection={true}
                    deselectOnSelectedOptionClick={true}
                    dataSource={testData}
                    multiple={true}
                    onChange={this.handlerExample} 
                    keepOpenOnSelection={true}
                    searchable={true} />

接下来，将它作为道具传递给childComponent，如下所示。

<ChildComponent subComponent={myComponent}/>

假设prop的变量名是subComponent （如上所示），您可以在ChildComponent的render方法中显示通过props传递的组件，如下所示。

render() {
    return (
        <div>
            {this.props.subComponent}
        </div>
    )
}