アセンブリ反応

この章では、我々が管理する我々のアプリケーションを容易にするためにコンポーネントを使用する方法について説明します。

"！Hello World」の次は、コンポーネント、コンポーネントと呼ばれるHelloMessage出力をカプセル化：

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello World！</h1>;
  }
});

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

»をお試しください

分析の例：

コンポーネントクラスHelloMessageを生成するためのReact.createClass方法。

コンポーネントクラスの<HelloMessage />インスタンスおよび出力情報。

ネイティブのHTML要素名は小文字で始まることに注意してください、とカスタムクラス名は大文字で始まるリアクト、例えば、HelloMessage helloMessage書き込むことができません。 コンポーネントクラスに加えて、唯一の1つのトップレベルのタグを含めることができ、あるいは与えられることに注意してください。

私たちは、コンポーネントにパラメータを渡す必要がある場合は、次のようにthis.propsオブジェクトインスタンスを使用することができます。

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="w3big" />,
  document.getElementById('example')
);

»をお試しください

this.props.namename属性によって、上記の例では、取得します。

あなたが属性を追加するときに、プロパティをhtmlFor書き込まれるようにするために、クラスは、クラス名を記述する属性ことに注意してください、これはクラスのため、およびJavaScript予約語のためのものです。

複合コンポーネント

私たちは一つの成分、分離点のすなわち異なる機能コンポーネントに複数のコンポーネントを作成することができます。

私たちは、出力サイト名とURLのコンポーネントを達成し、次の例：

var WebSite = React.createClass({
  render: function() {
    return (
      <div>
        <Name name={this.props.name} />
        <Link site={this.props.site} />
      </div>
    );
  }
});

var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});

var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});

React.render(
  <WebSite name="本教程" site=" http://www.w3big.com" />,
  document.getElementById('example')
);

»をお試しください

名前とリンクのウェブサイトのインスタンスを持って対応する情報の出力にWebサイト名とリンク部品に使用される成分の例。