Javascript 如何在React render中呈现HTMLDocument类型_Javascript_Html_Reactjs_Dom_Xpath

Javascript 如何在React render中呈现HTMLDocument类型

javascript html reactjs dom xpath

Javascript 如何在React render中呈现HTMLDocument类型,javascript,html,reactjs,dom,xpath,Javascript,Html,Reactjs,Dom,Xpath,我有类似的东西 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)</

我有类似的东西

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>
    );
}

public render（）{
让htmlRender=“ChildrenJoe有三个孩子：
林恩·菲尼莫尔·库珀·卡里（1983年已婚作家）
基德2
基德3”；
const doc=new DOMParser（）.parseFromString（htmlRender，'text/html'）；
让ele=doc.evaluate（“/html/body/ul/li[1]/a[1]”，doc，null，XPathResult.FIRST\u ORDERED\u NODE\u TYPE，null）；
ele.singleNodeValue.style.background='pink'；
返回(
上下文
-->这将返回[object HTMLBodyElement]
);
}

这就是我在上面所做的——将一个html字符串转换成一个html对象。然后使用Xpath解析它。操纵它（添加颜色），然后我想显示它。但它显示为

[object HTMLBodyElement]

。我做错了什么

谢谢你的帮助

我在Chrome的控制台上试用过，我认为您的问题是

doc.body.toString（）

所发生的事情是，您正在创建一个React

div

元素，该元素具有文本字符串内容“[object HTMLBodyElement]”，而不是

doc.body

doc.body.innerHTML

编辑：根据注释，您实际上应该使用

新的XMLSerializer（）。serializeToString（文档）

-由您决定；一切正常。

试着将

doc.body.toString（）打印到控制台，看看能得到什么。编辑：是的，doc.body.toString（）
->“[object HTMLBodyElement]”。使用doc.body.innerHTML
> let x = "<html>...</html>";
> let y = new DOMParser().parseFromString(x, "text/html");
> y                 // #document
> y.body            // <body>…</body>
> y.body.toString() // "[object HTMLBodyElement]"

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