reagieren Montage

In diesem Kapitel werden wir diskutieren, wie die Komponenten zu verwenden, um unsere Anwendung einfacher zu verwalten machen.

Als nächstes kapseln wir eine Ausgangskomponente, Komponente namens Hellomessage "Hallo Welt!":

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

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

Versuchen »

Analyse Beispiele:

React.createClass Verfahren zur Herstellung einer Komponente Klasse Hellomessagezuerzeugen.

<Hellomessage /> Instanz einer Komponentenklasse und Ausgabe von Informationen.

Beachten Sie, dass die nativen HTML-Elementnamen mit einem Kleinbuchstaben beginnen und benutzerdefinierte Reagieren Klassennamen beginnen mit einem Großbuchstaben, zum Beispiel, kann nicht geschrieben werden Hellomessage Hellomessage. Man beachte, dass zusätzlich zu der Komponenten-Klasse nur eine Top-Level-Tag enthalten kann oder auch gegeben werden.

Wenn wir Parameter müssen an eine Komponente zu übergeben, können Siethis.props Objektinstanz verwenden , wie folgt:

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

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

Versuchen »

Das obige Beispiel von this.props.nameNamensattribut zu erhalten.

Beachten Sie, dass, wenn Sie Attribute hinzufügen, Klassenattribute classname geschrieben werden, für Immobilien auf htmlFor geschrieben werden, ist dies, weil die Klasse und für die JavaScript reservierten Wörter.

Composite Components

Wir können mehrere Komponenten in einer Komponente, nämlich die verschiedenen Funktionskomponenten der Trennstelle erstellen.

Die folgenden Beispiele geben wir Site-Namen und URL-Komponenten erreicht:

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

Versuchen »

Beispiele für Komponenten in WebSite Name und Link-Komponenten mit dem Ausgang der entsprechenden Informationen verwendet, die WebSite Instanz von Name und Link bietet.