Реагировать сборки

В этой главе мы обсудим, как использовать компоненты, чтобы сделать наше приложение проще управлять.

Далее, мы инкапсулировать выходной компонент, компонент под названием HelloMessage "Hello World!":

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

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

Попробуйте »

Примеры анализа:

МетодReact.createClass для создания компонента класса HelloMessage.

<HelloMessage /> экземпляр информационного компонента класса и вывода.

Обратите внимание, что родные имена элемента HTML начинаются с буквы в нижнем регистре, а также нестандартные Реагировать имена классов начинаются с заглавной буквы, например, не может быть написана HelloMessage helloMessage. Следует отметить, что в дополнение к классу компонент может содержать только один верхнего уровня тега, или же будет дано.

Если нужно передать параметры к компоненту, вы можете использоватьthis.props экземпляр объекта следующим образом :

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

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

Попробуйте »

В приведенном выше примере с помощью this.props.nameимя атрибута , чтобы получить.

Обратите внимание, что, когда вы добавляете атрибуты, атрибуты классов, которые будут написаны Classname, для имущества, чтобы записать htmlFor, это потому, что класс и для JavaScript зарезервированные слова.

Композит

Мы можем создать несколько компонентов, в один компонент, а именно различных функциональных компонентов точки разделения.

Следующие примеры которых мы достигли имя и URL сайта вывода компонентов:

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

Попробуйте »

Примерами компонентов, используемых в WebSite Имя и Link компонентов к выходу соответствующей информации, которая имеет WebSite экземпляр Имя и ссылку.