如果 html 标签来自 React Component 中的数组，如何将它们呈现为 html 标签而不是字符串？

Question

例如，我有一个包含 3 个值的数组。 这些值也有一些 html 标签。 当我尝试通过该数组访问 map 并尝试显示我的每个数组项时，值按原样显示。 我希望我的数组值中的 HTML 标记作为真正的 html 元素执行。 下面是我的示例反应应用程序的 App.js 代码：

 const App = () => { const [questions, setQuestions] = useState([ "<h1>Test 1</h1>", "<h1>Test 2</h1>", "<h1>Test 3</h1>", ]); return ( <div> {questions.map((question) => ( <div>{question}</div> ))} </div> ); }; export default App;

上面的反应组件给我 output 如下：

<h1>Test 1</h1>
<h1>Test 2</h1>
<h1>Test 3</h1>

但是，我希望我的最终 output 如下所示，其中 html h1 标签在浏览器中显示时应用于我的数组元素。 我知道如果我在香草 javascript 中编写此类 html 标签，html 页面会通过自动读取任何 html 标签作为真正的 html 标签来正确呈现它，但我不知道如何在 React Component 中实现它。

测试 1

测试 2

测试 3

Answer 1

您可以在 map function 中使用dangerouslySetInnerHTML(question)而不是渲染中的<div>{question}</div>以获得所需的行为，但在使用时请谨慎。 它可能会导致不必要的安全风险（因此得名），例如 XSS。

更多信息： https://reactjs.org/docs/dom-elements.html