javascript - 无法显示 {胡说八道} 反应为标签显示在浏览器中

Question

我正在使用 nhs api 在反应应用程序中映射和显示其数据..

        return (
            <div className="dashBody">

                {(this.props.nhsData).map((value, index) => {
                    return (
                        <div className="nhsInfoBox">
                            <a key={index} href={value.url} target="_blank">{value.name}</a>
                            <p>{value.description}</p>

                            {value.text}
                        </div>
                    )
                })}
            </div>
        )

但是，文本已放置在包含其自己的段落标签的 api 对象中。

     {
        "@type": "WebPageElement",
        "name": "other_treatments",
        "description": "",
        "text": "<p> stuff </p>",
     },

所以我想如果我刚刚渲染 { value.text } 它会像正常一样包含标签并渲染为段落元素..

但是，它仍然在浏览器中包含其段落标签，而不是将其显示为段落。

有任何想法吗？

标签： javascriptreactjs

Answer 1

它可能很危险，您应该确保它是安全数据。

您可以使用名为 dangerouslySetInnerHTML 的 React 道具

<span dangerouslySetInnerHTML={{ __html: value.text }} />