Komponen bertindak balas


Komponen Bertindak Balas

Dalam bab ini kita akan membincangkan cara menggunakan komponen untuk menjadikan aplikasi kita lebih mudah diurus.

Seterusnya kami mengelak komponen yang mengeluarkan "Hello World!" Komponen itu dinamakan 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>

< 🎜. >Jalankan instance»Klik butang "Run instance" untuk melihat contoh dalam talian

Analisis instance:

React.createClass kaedah digunakan Menjana kelas komponen HelloMessage.

<HelloMessage /> Contoh kelas komponen dan keluarkan mesej.

Perhatikan bahawa nama elemen HTML asli bermula dengan huruf kecil, manakala nama kelas React tersuai bermula dengan huruf besar Contohnya, HelloMessage tidak boleh ditulis sebagai helloMessage. Di samping itu, anda perlu ambil perhatian bahawa kelas komponen hanya boleh mengandungi satu label peringkat teratas, jika tidak, ralat akan dilaporkan.

Jika kita perlu menghantar parameter kepada komponen, kita boleh menggunakan objek

this.props Contohnya adalah seperti berikut:

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>

Jalankan contoh»Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Dalam contoh di atas , atribut

name diteruskan melalui props.name ini untuk mendapatkannya.

Perhatikan bahawa apabila menambah atribut, Atribut kelas perlu ditulis sebagai className, dan atribut for perlu ditulis sebagai htmlFor Ini kerana kelas dan untuk adalah perkataan terpelihara dalam JavaScript.

Komponen Komposit

Kita boleh mensintesis komponen dengan mencipta berbilang komponen, iaitu, mengasingkan titik fungsi komponen yang berbeza.

Dalam contoh berikut, kami melaksanakan komponen yang mengeluarkan nama tapak web dan URL:

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 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>

Berjalan Contoh»Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Dalam kejadian itu, komponen Laman Web menggunakan komponen Nama dan Pautan untuk mengeluarkan maklumat yang sepadan, yang bermaksud bahawa Laman Web mempunyai contoh Nama dan Pautan.

←
→