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>?

但是想要这个：

Are you sure?

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

Answer 3

无需将 jsx 与 return 一起使用，只需这样做：

const someHtml = (<p>Are you <b>sure</b>?</p>);

SemanticUI/ReactJS 模态不支持 html 内容

SemanticUI/ReactJS modal not support html content

javascript

reactjs

semantic-ui