reaccionar ensamblaje

En este capítulo vamos a discutir cómo utilizar componentes para hacer que nuestra aplicación más fácil de manejar.

A continuación, se encapsula una salida de componente, componente llamado HelloMessage "Hello World!":

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

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

Trate »

ejemplos de análisis:

React.createClass método para generar una HelloMessageclase decomponente.

<HelloMessage /> instancia de una clase y la información de salida de componente.

Tenga en cuenta que los nombres de los elementos HTML nativos comienzan con una letra minúscula, y la costumbre reaccionan los nombres de las clases comienzan con una letra mayúscula, por ejemplo, no se puede escribir HelloMessage HelloMessage. Tenga en cuenta que, además de la clase de componente puede contener sólo una etiqueta de nivel superior, o de lo contrario será dada.

Si tenemos que pasar parámetros a un componente, puede utilizarthis.props instancia de objeto de la siguiente manera:

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

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

Trate »

El ejemplo anterior por this.props.name atributo denombre de conseguir.

Tenga en cuenta que cuando se agrega atributos, atributos para ser escrito className, por la propiedad de ser escrito htmlFor clase, esto se debe a la clase y para las palabras JavaScript reservados.

componentes compuestos

Podemos crear múltiples componentes en un componente, es decir, los diferentes componentes funcionales del punto de separación.

Los siguientes ejemplos que hemos logrado componentes del nombre y la dirección URL del sitio de salida:

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

Trate »

Ejemplos de los componentes utilizados en los componentes Nombre del sitio web y el enlace a la salida de la información correspondiente, que tiene la Página Web de ejemplo Nombre y Link.