我创建了一个有nested routes个用户的react应用程序.

我的一个嵌套路由是使用一个返回完整HTML content的后端api.

我需要在我的UI中用相同的HTML和样式显示确切的内容.

通过使用createElementappendChild 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>

推荐答案

实际上,您正在try 将HTML字符串转换为JSX.您可以将其分配到名为dangerouslySetInnerHTML的react组件props 中

如:

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

你可以在这里试试

Html相关问答推荐

当表头包含特殊字符时,R Quarto发布的HTML表中不必要的大列宽

如何在css中将包含多行文本的多个p-tag放在一起(并排)?

CURL邮箱中的图像不能调整其大小

如何在图像中垂直和水平居中显示文本?

滚动两个不同高度的DIV;一个等待另一个

Bootstrap nav没有崩溃

高度:适合-内容不拉伸以适合内部长度

为什么 Select 元素在带有数据绑定的Blazor上行为怪异?

配置了 HTML 视口的 Google Apps 脚本移动网络应用程序无法正确显示

Swift WkMessageHandler 消息不发送

为什么当我按第三个按钮时,前两个按钮会跳动?

为什么可滚动弹性项目需要 flex-basis: 0 ?

当我们在vue中使用截断大文本时如何显示标题属性?

如何调整底部有 SVG 的元素的高度,使其在所有宽度上看起来都不错?

CSS 网格跨度行到所有行

导航丸被选中(活动),但内容未显示.怎么会?

如何在滚动行中显示一张图片和下一张图片的一半?

父背景仅在子元素中可见

我用 ejs 修复了一个奇怪的语法错误,我想知道问题出在哪里

如何在单个 div 内获得具有半径的不同 colored颜色 ?