javascript - 如何将 React 组件作为道具传递

Question

我正在使用 react-semantic-ui 模态对象。打开模态框的对象是一个道具。

 <Modal
       trigger=<Button>Text</Button>
       otherProp=...
   >
  </Modal>

我想将 Modal 嵌入到另一个组件中：

export default class Confirm extends Component {

    render() {
        return (
            <Modal
                trigger={this.props.trigger} /* here */
              >    
                <Modal.Content>
                    ...
                </Modal.Content>
                <Modal.Actions>
                    ...
                </Modal.Actions>
            </Modal>
        )
    }
}

如何将 JSX 代码 ( <Button>Text</Button>) 作为道具传递为模态道具？

Answer 1

您可以轻松地进行以下操作

<Modal trigger={ <Button>Text</Button> }> 
   // content goes here 
</Modal>

在里面Modal，你可以通过它来访问它，this.props.trigger这将是你的按钮组件，你可以像下面这样渲染它

render () {
    return (
        <div>
            // some code can go here
            { this.props.trigger }
        </div>
    );
}