时间戳

首页 > 解决方案 > SemanticUI/ReactJS 模态不支持 html 内容

javascript - SemanticUI/ReactJS 模态不支持 html 内容

问题描述

我使用ReactJSand 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>?

但是想要这个：

你确定吗？

标签： javascriptreactjssemantic-ui

解决方案

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

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

推荐阅读