reagire assemblaggio

In questo capitolo vedremo come utilizzare i componenti per rendere la nostra applicazione più facile da gestire.

Avanti, incapsuliamo una uscita component, componente chiamato HelloMessage "Ciao Mondo!":

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

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

Prova »

Esempi di analisi:

MetodoReact.createClass per la generazione di una classe HelloMessage componente.

<HelloMessage /> istanza di una classe di informazioni e di uscita component.

Si noti che i nomi degli elementi HTML nativo iniziano con una lettera minuscola, e reagire personalizzato nomi delle classi iniziano con una lettera maiuscola, per esempio, non può essere scritto HelloMessage HelloMessage. Si noti che in aggiunta alla classe del componente può contenere solo tag di primo livello, altrimenti sarà dato.

Se abbiamo bisogno di passare parametri a un componente, è possibile utilizzarethis.props istanza di un oggetto come segue:

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

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

Prova »

L'esempio precedente per attributo this.props.namenome per ottenere.

Si noti che quando si aggiungono gli attributi, attributi di classe da scrivere className, per la proprietà di essere scritto htmlFor, questo è perché la classe e per le parole riservate JavaScript.

Componenti compositi

Possiamo creare più componenti in un componente, vale a dire le diverse componenti funzionali del punto di separazione.

Gli esempi che seguono abbiamo raggiunto nome e l'URL del sito componenti di uscita:

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

Prova »

Esempi di componenti utilizzati nel sito web nome e il link componenti per l'uscita delle informazioni corrispondenti, che ha istanza WebSite di nome e il link.