将自定义 React 组件插入到带有 html 内容的 String 变量中

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 字符串替换为 react 组件并同时渲染 html 标签和字符串中的新组件？

Answer 1

使用dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={html} /> 

Answer 2

您可以使用dangerouslySetInnerHTML。 check docs here

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