未処理の反応成分からjQuery（ '<div></div>'）から生のHTMLを返します

Question

私はjsPlumbを使用しています（これは関係ないと思います）。そしてある時点で私はカスタムオーバーレイを作成しています。 $() htmlのコンストラクタを必要とします：

create:function(component) { 
    return $("<select id='myDropDown'><option value='foo'>foo</option><option value='bar'>bar</option></select>"); 
} 

私は、文字列、または単にリアクト要素を返すようにしようとしたが、それは動作しません。

私はかなりメソッドがちょうどいくつかの生のhtml要素を望んでいると確信していますので、私は使用しているjQueryの場合は問題ではありません。 （あなたがChromeでそれを慰めるかのように、それは私はいくつかのネイティブDOM形式であると確信しているHTMLを、印刷します？）

は、どのように私はアンマウントから生のHTMLがコンポーネントに反応を返すのですか？

私はHTMLをReactコンポーネントに変換する方法を見つけることができますが、その逆です。 jQueryを避けること

Answer 1

jQueryオブジェクトはDOMオブジェクトに簡単に変換できます。
例：jQuery Obj：$（セレクタ）。 DOM obj：$（セレクタ）[0]。

Answer 2

あなたはそうのようなHTMLのDOMオブジェクトにjQueryオブジェクトを回すことができます：コンポーネントがすでにDOMにレンダリングされていない場合は

var test = document.getElementById('test') //returns a HTML DOM Object 
var test = $('#test') //returns a jQuery Object 
var test = $('#test')[0] //returns a HTML DOM Object 

Answer 3

。 ReactDOMServer.renderToStaticMarkup(component)を使用できます。 ReactDOMServerの内部に名前があるにもかかわらず、まだ動作するはずです。

もう1つの可能性は、新しいDOMノードを作成し、それに正常に反応してからそのコンテンツを取得することです。おそらくこのような何か：

create: function(component) { 
    var div = document.createElement('div'); 
    React.render(component, div); 
    return $(div.innerHTML); 
} 

Answer 4

$("<div>")オブジェクトのみが返されます。これを行うより良い方法は、divにHTMLをラップして親を返すことです。

$("<select id='myDropDown'><option value='foo'>foo</option><option value='bar'>bar</option></select>").wrap("<div>").parent().html()