將自定義 React 組件插入到具有 html 內容的字符串變量中

Question

我有一個包含 HTML 標簽的字符串，如下所示：

<div class="header">Hello!</div>
<div class="body">How are you?</div>
<div class="footer">Good bye!</div>

我需要用我的自定義反應組件替換<div class="body">How are you?</div> 。 我的反應組件使用從 API 動態獲取的數據顯示內容。 例如：

import React, { useState } from 'react';
import axios from 'axios';

export default function App(){
    const [books, setBooks] = . useState(null);

    const apiURL = "https://www.anapioficeandfire.com/api/books?pageSize=30";

    const fetchData = async () => {
        const response = await axios.get(apiURL)

        setBooks(response.data) 
    }

    return (
        <div>
           {books.map((book, index) => {
                return <p key={index}>{book.title}</P>
           })}
        </div>
    )
}

如何用反應組件替換 html 字符串並呈現 html 標簽和字符串中的新組件？

Answer 1

危險地使用dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={html} /> 

Answer 2

您可以使用dangerouslySetInnerHTML 。 在此處查看文檔

  return (
        <div>
           {books.map((book, index) => {
                return  <div key={index} dangerouslySetInnerHTML={{__html: book.title}}></div>
           })}
        </div>
    )