如何將React組件作為prop傳遞

Question

我正在使用react-semantic-ui Modal對象。 打開模態的對象是道具。

 <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>
    );
}