反応コンポーネント


React コンポーネント

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

次に、「Hello World!」を出力するコンポーネントをシールします。コンポーネントの名前は HelloMessage です:

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello World！</h1>;
        }
      });

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

Run Instance»

[Run Instance] ボタンをクリックしてオンライン インスタンスを表示します

インスタンス分析:

React.createClassメソッドは、コンポーネントクラスHelloMessageを生成するために使用されます。

<HelloMessage /> コンポーネントクラスをインスタンス化し、メッセージを出力します。

ネイティブ HTML 要素名は小文字で始まりますが、カスタム React クラス名は大文字で始まることに注意してください。たとえば、HelloMessage は helloMessage として記述することはできません。さらに、コンポーネント クラスには最上位ラベルを 1 つだけ含めることができることに注意する必要があります。含めないとエラーが報告されます。

コンポーネントにパラメータを渡す必要がある場合は、this.propsオブジェクトを使用できます。例は次のとおりです:

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello {this.props.name}</h1>;
        }
      });

      ReactDOM.render(
        <HelloMessage name="php" />,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

「Run Instance」をクリックします。 " ボタンをクリックしてオンラインの例を表示します

上記の例では、
name

属性は this.props.name を通じて取得されます。

属性を追加するときは、 class 属性は className として記述する必要があり、for 属性は htmlFor として記述する必要があります。これは、class と for が JavaScript の予約語であるためです。

複合コンポーネント

複数のコンポーネントを作成することによって、つまり、コンポーネントの異なる機能点を分離することによって、コンポーネントを合成できます。

次の例では、Web サイト名と URL を出力するコンポーネントを実装しました:

インスタンス

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
   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="php中文网" site=" http://www.php.cn" />,
      document.getElementById('example')
    );
    </script>
  </body>
</html>

インスタンスの実行»
オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックしてください

この例では、WebSite コンポーネントは Name および Link コンポーネントを使用して、対応する情報を出力します。つまり、WebSite には Name と Link のインスタンスがあります。

←
→