javascript関数のパラメータとして渡されるhtmlマークアップのオブジェクトタイプ

Question

私はjavascriptを初めて使用して反応します。 REACTでは、我々は次のサンプルコードを参照してください。ここで

 ReactDOM.render(
     <h1> Hello, world! </h1>, 
     document.getElementById('example') 

ReactDOM.render accetps「<H1>こんにちは、世界！ </h1 > 'を最初のパラメータとして使用します。

私は次のテストコードを試しました。警告ボックスに '[object Object]'と表示されました。 alert（...）に 'typeof var1'を使用すると、 'object'しか取得できません。このオブジェクトの正確なタイプは何ですか？どのように私はデバッグし、それの詳細情報を表示できますか？

function mytest(var1, var2) { 
     alert(var1); 
     document.getElementById('example2').appendChild(var1); 
    } 

    mytest(<h1>hello</h1>, <h2>world</h2>); 

Answer 1

これを試してください。あなたはあなたの反応要素の文字列バージョンを取得します。 {}のような伝統的なjsオブジェクトとして戻ってこないことを覚えておいてください。それはおそらく反応要素なので、それを文字列にするといくらかかかります。私が下に示すのは、その要素と実際に反応するものをあなたに与えるはずです。

alert(React.renderToString(var1)); 

Answer 2

（バベルを使用して）、プレーンJavaScriptにtranspiledあなたJSXのコードは次のようになります。あなたはvar1が実際にReact.createElement関数の積であり、それはReactElementだ見ることができるように

function mytest(var1, var2) { 
     alert(var1); 
     document.getElementById('example2').appendChild(var1); 
} 

mytest(React.createElement(
     'h1', 
     null, 
     'hello' 
), React.createElement(
     'h2', 
     null, 
     'world' 
)); 

。