SemanticUI / ReactJS模式不支持html内容

Question

我使用ReactJS和SemanticUI，想使用modal，但看起来里面不支持html，对吗？只显示纯文本。好吧，我做了一个显示模式的组件，名为Alert：

<Modal
    open={this.props.open}
    size={this.props.size}
    content={this.props.content}
    actions={[
        { key: 'no', content: this.props.actions, positive: false, onClick: this.props.close }
    ]}
/> 

在页面上，我在单击时显示警报：

goBuy = (e) => {
    let obj = {
        size: 'tiny',
        actions: 'nope',
        click: this.goSpend,
        content: 'Are you sure?',
    }
    this.setState({
        alert: obj,
        alertOpen: true,
    })
}

它工作正常，但是现在我想在这样的内容中添加一些html代码：

content: 'Are you <b>sure</b>?',

但是这不起作用，并且显示纯文本形式的html代码，并且不会使其变粗体。知道我该如何解决吗？

Are you <b>sure</b>?

但是想要这个：

您是确定吗？

Answer 1

您可以将jsx作为content传递并呈现它。

Answer 2

这里的问题是模态本身认为您要传递给content的值是文本值，因此模态会显示与您提供的完全相同的单词。因此，您可以将jsx作为内容传递并像这样呈现它，而不是在那里传递<br>标记。

 const content = {
       return(<p>Are you <b>sure</b></p>);
     }
goBuy = (e) => {
    let obj = {
        size: 'tiny',
        actions: 'nope',
        click: this.goSpend,
        content: {content },
    }
    this.setState({
        alert: obj,
        alertOpen: true,
    })
}