如何傳遞React組件作爲道具

我正在使用react-semantic-ui Modal對象。打開模式的對象是一個道具。如何傳遞React組件作爲道具

<Modal 
     trigger=<Button>Text</Button> 
     otherProp=... 
    > 
    </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>）作爲道具被渲染爲一個模式道具？

來源

2017-04-10 znat

您可以輕鬆地做到以下

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

來源

2017-04-10 20:23:57

感謝。我的問題是如何在Modal標籤定義中渲染'this.props.trigger'。我想通過''作爲道具 – znat

嗨@znat，我已經回答了;），你可以像'任何其他字符串prop或變量一樣在'Modal'中打印它。 '{this.props.trigger}'在'render'方法 –

我覺得有一個誤區：我需要類似的東西： <模態觸發= {} this.props.trigger> //內容放在這裏但是這不起作用 – znat

如何傳遞React組件作爲道具

回答

相關問題