我创建了一个有nested routes
个用户的react应用程序.
我的一个嵌套路由是使用一个返回完整HTML content
的后端api.
我需要在我的UI中用相同的HTML和样式显示确切的内容.
通过使用createElement
和appendChild
inside useEffect
方法,根据axios响应操纵DOM,我能够成功地实现它.
但是,使用react背后的整个理念是,不要修改DOM,让react通过简单地更新状态或props 来处理它.
我的问题是:
以下是相关代码示例:
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'/>
);
}
What did NOT work
理想情况下,我应该能够在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>