React montaż

W tym rozdziale omówimy jak korzystać z komponentów, aby nasza aplikacja łatwiej zarządzać.

Następnie owijamy wyjście komponent, komponent zwany HelloMessage "Hello World!":

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

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

Spróbuj »

Przykłady analizy:

MetodaReact.createClass do wytwarzania komponentów klasy HelloMessage.

<HelloMessage /> instancji komponentu informacji klasowej i wyjściowego.

Należy pamiętać, że rodzime nazwy elementów HTML zaczynać się małą literą, a zwyczaj React nazwy klas zaczyna się od dużej litery, na przykład, nie może być napisany HelloMessage helloMessage. Należy pamiętać, że w dodatku do klasy składnik może zawierać tylko jeden znacznik góry poziomu, albo będą.

Jeśli musimy przekazać parametry do składnika, można użyćthis.props instancji obiektu w następujący sposób:

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

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

Spróbuj »

Powyższy przykład przez this.props.name atrybutuname dostać.

Należy pamiętać, że podczas dodawania atrybutów, klasa atrybutów jest napisany className, na nieruchomość być napisane htmlFor, to dlatego, że klasy i dla JavaScript słowa zastrzeżone.

Elementy kompozytowe

Możemy utworzyć wiele elementów w jeden składnik, a mianowicie różnych elementów funkcjonalnych punktu separacji.

Poniższe przykłady Osiągnęliśmy nazwę i adres URL witryny wyjście komponentów:

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

Spróbuj »

Przykłady składników stosowanych w Luckdrive i połączyć składniki do produkcji odpowiedniej informacji, która ma instancję internetowej Imię i link.