在 react 中显示 {<p> blah blah <p>} 时出现问题，因为<p> 标签在浏览

Question

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

        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}，它将像往常一样包含标签，并呈现为段落元素。

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

有什么想法吗？

Answer 1

它可能是危险的，你应该确保它是安全的数据。你可以使用名为 dangerouslySetInnerHTML 的 React 道具<span&nbsp;dangerouslySetInnerHTML={{&nbsp;__html:&nbsp;value.text&nbsp;}}&nbsp;/>