bereaksi perakitan

bab ini kita akan membahas bagaimana menggunakan komponen untuk membuat aplikasi kita lebih mudah untuk mengelola.

Selanjutnya, kita merangkum output komponen, komponen yang disebut HelloMessage "Hello World!":

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

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

Coba »

contoh analisis:

MetodeReact.createClass untuk menghasilkan komponen HelloMessage kelas.

<HelloMessage /> contoh dari komponen informasi kelas dan output.

Perhatikan bahwa nama elemen HTML asli dimulai dengan huruf kecil, dan adat Bereaksi nama kelas dimulai dengan huruf kapital, misalnya, tidak dapat ditulis HelloMessage helloMessage. Perhatikan bahwa selain kelas komponen dapat berisi satu tag tingkat atas, atau yang lain akan diberikan.

Jika kita harus lulus parameter untuk komponen, Anda dapat menggunakanthis.props contoh objek sebagai berikut:

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

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

Coba »

Contoh di atas dengan this.props.name atributnama untuk mendapatkan.

Perhatikan bahwa ketika Anda menambahkan atribut, kelas atribut yang akan ditulis className, untuk properti yang akan ditulis htmlFor, ini karena kelas dan untuk kata-kata JavaScript reserved.

Komponen komposit

Kita bisa membuat beberapa komponen menjadi satu komponen, yaitu komponen fungsional yang berbeda dari titik pemisahan.

Berikut ini contoh kita mencapai nama dan URL situs keluaran komponen:

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')
);

Coba »

Contoh komponen yang digunakan dalam WebSite Nama dan Link komponen untuk output dari informasi yang sesuai, yang memiliki WebSite contoh Nama dan Link.