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} />

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

<ChildComponent subComponent={myComponent}/>

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

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

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

1 个答案: