在 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 dangerouslySetInnerHTML={{ __html: value.text }} />