如何传递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组件作为道具

回答

相关问题