reagir assembly

Neste capítulo, vamos discutir como usar componentes para tornar a nossa aplicação mais fácil de gerir.

Em seguida, vamos encapsular uma saída componente, componente chamado HelloMessage "Olá mundo!":

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

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

tente »

exemplos de análise:

React.createClass método para a geração de um HelloMessageclasse decomponente.

<HelloMessage /> instância de uma informação de classe e saída componente.

Note-se que os nomes dos elementos HTML nativos começam com uma letra minúscula, e o costume Reagir nomes de classes começam com uma letra maiúscula, por exemplo, não pode ser escrito HelloMessage helloMessage. Note-se que para além da classe de componentes pode conter apenas uma marca de nível superior, ou então irá ser dada.

Se precisamos passar parâmetros para um componente, você pode usarthis.props instância do objeto da seguinte forma:

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

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

tente »

O exemplo acima por this.props.name atributo denome para conseguir.

Observe que quando você adicionar atributos, atributos de classe para ser escrito className, para a propriedade a ser escrito htmlFor, isso ocorre porque a classe e para as palavras JavaScript reservados.

componentes em materiais compósitos

Nós podemos criar vários componentes em um componente, ou seja, os diferentes componentes funcionais do ponto de separação.

Os exemplos a seguir nós alcançados nome e URL componentes do site de saída:

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

tente »

Exemplos de componentes utilizados em componentes de nome e site link para a saída da informação correspondente, que tem exemplo site do Nome e link.