如果 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