如何在 React 应用程序中从服务器响应创建 childElement

Question

我创建了一个包含许多 nested routes 的 React 应用程序。

我的一个嵌套路由正在使用后端 api，returns 一个完整的 HTML content。

我需要在我的 UI 中显示具有相同 HTML 和样式的确切内容。

我能够通过在 useEffect 方法中使用 createElement 和 appendChild 根据 axios 响应操纵 DOM 来成功实现它。

但是，使用 React 背后的整个哲学是，不要修改 DOM 并让 React 通过简单地更新状态或道具来工作。

我的问题是：有没有更干净的方法来使用 api 在反应应用程序中返回 HTML？

这里是示例相关代码：

Item.js

...
...
useEffect( ()=>{  
    const fetchAndUpdateItemContent = async () => {
      try {     
        const response = await axios.get(url);
       
        var contentDiv = document.createElement("div");
        contentDiv.innerHTML = response.data.markup;
        document.getElementById(‘itemContent’)
             .appendChild(contentDiv); 
       
      } catch (err) {
          .....
          console.error(err);
          ......
        }
      }
    };
    fetchAndUpdateItemContent(); 
  },[itemId])

  return (
   <div id=‘itemContent'/>
  );
}

什么不起作用

理想情况下，我应该能够在 Item.js 中拥有 itemContent 的状态，并且能够像这样根据服务器响应更新它。但是当我执行类似下面的操作时，会显示整个 HTML 标记，而不仅仅是可显示的内容。

const [itemContent, setItemContent] = useState(‘Loading ...');

...
    useEffect( ()=>{  
        const fetchAndUpdateItemContent = async () => {
          try {     
            const response = await axios.get(url);
            setItemContent(response.data.markup)  
          } catch (err) {
              .....
              console.error(err);
              ......
            }
          }
        };
        fetchAndUpdateItemContent(); 
      },[itemId])
    
      return (

    <div id=‘itemContent'>
      {itemContent}
     </div>

Answer 1

我相信你可以使用dangerouslySetInnerHTML

Answer 2

您实际上是在尝试将 HTML 字符串转换为 JSX。您可以将其分配到名为 dangerouslySetInnerHTML

的反应组件道具中

例如：

const Item = () => {
  const yourHtmlStringResponse = '<h1>Heading 1</h1><h2>Heading 2</h2>'
  return <div dangerouslySetInnerHTML={{__html: yourHtmlStringResponse}}></div>
}

你可以在这里试试dangerouslySetInnerHTML-Codesandbox

如何在 React 应用程序中从服务器响应创建 childElement

How to create childElement from server response in a react app

html

reactjs

react-dom

例如：