如何在 React 渲染中渲染 HTMLDocument 类型答案

【问题标题】：How do I render HTMLDocument type in React render如何在 React 渲染中渲染 HTMLDocument 类型
【发布时间】：2017-08-12 07:18:50
【问题描述】：

我有这样的事情

public render(){

  let htmlRender = "<html><body><h2>Children</h2>Joe has three kids:<br/><ul><li>Linn Fenimore Cooper Cary (married writer <a href='Ved Mehta'>Ved Mehta</a> in 1983)</li><li>kid2</li><li>kid3</li></ul></body></html>";

  const doc  = new DOMParser().parseFromString(htmlRender,'text/html');


  let ele = doc.evaluate("/html/body/ul/li[1]/a[1]", doc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
  ele.singleNodeValue.style.background = 'pink';

  return (
        <div className="details-block context-block">
            <h5>Context</h5>
            <div dangerouslySetInnerHTML={{__html:doc.body.toString()}} /> --> This returns [object HTMLBodyElement]
        </div>
    );
}

这就是我在上面所做的 - 将一个 html 字符串转换为一个 HTML 对象。然后使用 Xpath 解析它。操作它（添加颜色）然后我想显示它。但它显示为[object HTMLBodyElement]。我做错了什么？

感谢您的帮助！

【问题讨论】：

尝试将doc.body.toString() 打印到控制台，看看你会得到什么。编辑：是的，doc.body.toString() -> “[object HTMLBodyElement]”。使用doc.body.innerHTML

标签： javascript html reactjs dom xpath

【解决方案1】：

我在 Chrome 的控制台中尝试过，我认为您的问题是 doc.body.toString()。

> let x = "<html>...</html>";
> let y = new DOMParser().parseFromString(x, "text/html");
> y                 // #document
> y.body            // <body>…</body>
> y.body.toString() // "[object HTMLBodyElement]"

不要使用toString()，而是使用innerHTML（如果需要<body/> 标签，则使用outerHTML）。

> y.body.innerHTML  // "<h2>Children</h2> ..."

发生的事情是您正在创建一个 React div 元素，其文字字符串内容为“[object HTMLBodyElement]”，而不是 doc.body - doc.body.innerHTML 的内容

编辑：根据 cmets here，您实际上应该使用 new XMLSerializer().serializeToString(document) - 取决于您；什么都行。

【讨论】：