この反応例はどのように機能しますか？

Question

私は現在リアクト学ぶしようとしている、と多分私は眠いし、何かが欠けているが、私は依頼する必要があります。

このコード例では（の「はじめに」ページに反応から）、なぜ「世界であります"印刷された？ 私は、this.props.nameが渡されたところから、関数が子を探していて、追加のテキスト入力を受け付けていないことを確認しています。少なくとも、Re：React.createElementを解釈する方法です。

このコードは「意図したとおりに動作しています」、「Hello World」を印刷していますが、誰でも正確に教えてください。なぜが動作しますか？私はちょうど "こんにちは"、そしておそらく "ワールド"について定義されていないコンソールエラーを見ることを期待しています。返事をいただいた方には、事前に説明をお願いします。 ;）

var Hello = React.createClass({ 
displayName: 'Hello', 
render: function() { 
    return React.createElement("div", null, "Hello ", this.props.name); 
} 
}); 

ReactDOM.render(
React.createElement(Hello, { name: "World"}), 
container 
); 

Answer 1

がReact.createElement関数への要素の型を取る - null
二人の子供（文字列が渡された場合、それはHTML要素名だが、それも再することができ作成しますその後、ReactClassにフェレンス）、そしてpropsオブジェクト、次の引数として子どもの未定数。

あなたが反応するクラスとしてHelloを渡す

React.createElement(Hello, { name: "World"}) 

をインスタンス化する起動するとrender方法を含むHelloの全ての方法にthis.propsとして利用可能であるオブジェクトpropsとして{ name: "World"}、 。

その後Hello要素（クラス）が再びcreateElementを呼び出します。

ここ

React.createElement("div", null, "Hello ", this.props.name) 

、"div"はpropsがnullであり、"Hello "とthis.props.nameの両方を作成するための子である、作成されるHTML要素のタイプです、最初の文字列はリテラル文字列、もう1つはpropsオブジェクトのキーへの参照です。

あなたが逃したのは、createElementメソッドに任意の数の引数を渡すことができ、3番目から始まるすべての引数が兄弟要素としてレンダリングされるということです。

Answer 2

をあなたが見ることができるように、レンダリング関数の内部、createElement関数に渡される追加のパラメータがあります。

最初のパラメータは、あなたがインスタンス化したいと第二の小道具があるコンポーネントクラスです。ここでは、"World"という値で定義されたname小道具があります。

Helloコンポーネントはnameという小道具を取り入れているため、コンポーネントに含まれると言われている"Hello "とともにレンダリングします。単純なdiv要素です。

Here you can seeパラメータが定義され、露出すると反応createElement機能について説明します。すなわち

：

React.createElement("div", null, "Hello ", this.props.name);

エレメントタイプ - div
小道具 - （"World"である）"Hello "とthis.props.name