如何将组件作为props传递给react js中的另一个组件？

Question

我有这样的组件

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

我将它分配给一个变量并作为道具传递但它在那里显示为一个字符串。怎么做到这一点？

Answer 1

您需要声明组件如下

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

接下来将它作为prop传递给你的childComponent，如下所示。

<ChildComponent subComponent={myComponent}/>

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

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