は、どのように私はHTMLDocumentのレンダリングを行うと入力

私はこれは私が上記のやっているものです。このは、どのように私はHTMLDocumentのレンダリングを行うと入力

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]と表示されます。私は何を間違えているのですか？

ありがとうございました！

出典

2017-03-20 suprita shankar

'doc.body.toString（）'をコンソールに表示して、何を得るかを試してみてください。編集：はい、 'doc.body.toString（）' - > "[オブジェクトHTMLBodyElement]" 'doc.body.innerHTML'を使用 –

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()、（あなたが<body/>タグをしたい場合はプロパティまたはouterHTML）innerHTMLを使用しています。何が起こっている

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

は、あなたの代わりにdoc.bodyの内容の文字列リテラルの内容でdiv要素に反応「[オブジェクトHTMLBodyElement]」作成されている - doc.body.innerHTML

編集を：あなたが実際にあるべきhereのコメントによるとあなたまでnew XMLSerializer().serializeToString(document)を使用してください。何があっても。

出典

2017-03-20 20:48:59

は、どのように私はHTMLDocumentのレンダリングを行うと入力

答えて

関連する問題