réagir ensemble

Ce chapitre, nous allons discuter de la façon d'utiliser des composants pour rendre notre application plus facile à gérer.

Ensuite, nous encapsuler une sortie composante, composant appelé HelloMessage "Bonjour tout le monde!":

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

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

Essayez »

Des exemples d'analyse:

méthodeReact.createClass pour générer un HelloMessagede classe decomposant.

<HelloMessage /> instance d'une information de classe et de sortie composante.

Notez que les noms d'éléments HTML natifs commencent par une lettre minuscule, et la coutume Réagissez noms de classe commencent par une lettre majuscule, par exemple, ne peut pas être écrit HelloMessage HelloMessage. Notez que, en plus de la classe de composant peut contenir qu'une seule étiquette de niveau supérieur, ou bien sera donné.

Si nous avons besoin de passer des paramètres à un composant, vous pouvez utiliserthis.props instance d'objet comme suit:

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

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

Essayez »

L'exemple ci - dessus par this.props.name attributname à obtenir.

Notez que lorsque vous ajoutez des attributs, attributs de classe à écrire className, pour les biens à écrire htmlFor, cela est parce que la classe et pour les mots JavaScript réservés.

Composants composites

Nous pouvons créer plusieurs composants en un seul composant, à savoir les différents composants fonctionnels du point de séparation.

Les exemples suivants que nous avons obtenus nom et URL site de production de composants:

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

Essayez »

Des exemples de composants utilisés dans WebSite Nom et Lien des composants à la sortie de l'information correspondante, qui a par exemple WebSite de nom et Link.