我創建了一個包含許多nested routes.
我的嵌套路由之一是使用回傳完整HTML content.
而且我需要在我的 UI 中顯示具有相同 HTML 和樣式的確切內容。
我可以通過根據內部的 axios 回應操作 DOM useEffect，使用createElement和來成功實作它appendChild。
我的問題：有沒有更簡潔的方法在反應應用程式中使用 api 回傳的 HTML？
使用 react 背后的整個理念是，當我們更新狀態或道具時，不要修改 DOM 并讓 react 對其進行處理。
這是示例相關代碼：
專案.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'/>
);
}
什么沒有奏效
理想情況下，我應該能夠擁有一個狀態itemContent，Item.js并能夠根據這樣的服務器回應來更新它。但是當我執行如下操作時，會顯示整個 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>
uj5u.com熱心網友回復：
您實際上是在嘗試將 HTML 字串轉換為 JSX。您可以將其分配給名為dangerouslySetInnerHTML的反應組件道具
例如：
const Item = () => {
const yourHtmlStringResponse = '<h1>Heading 1</h1><h2>Heading 2</h2>'
return <div dangerouslySetInnerHTML={{__html: yourHtmlStringResponse}}></div>
}
你可以在這里危險地嘗試一下SetInnerHTML-Codesandbox
uj5u.com熱心網友回復：
我相信你可以危險地使用SetInnerHTML
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/462396.html
上一篇：如何使用這樣的javascript在控制臺中顯示物件？
下一篇：編輯資料標題的樣式，例如位置