Подтвердить что ты не робот

Реакт: передача реквизита потомкам

Есть ли рекомендуемый шаблон для передачи реквизитов для компонентов-потомков в React?

Ниже я передаю prop callback дочернему компоненту:

Master = React.createClass({
  render: function() {
    return (
      <div>
        <ListComp items={this.props.items} callback={this.handleClick} />
      </div>
    );
  }
});

ListComp = React.createClass({
  render: function() {

    this.props.items.forEach(function(item) {
      items.push(<ItemView item={item} callback={this.props.callback} />);
    }, this);

    return (
      <ul>{items}</ul>
    );
  }
});

И затем поддержка callback передается компоненту-потомку:

ItemComp = React.createClass({
  render: function() {
    return (
      <li><a onClick={this.handleClick} href="#">Link</a></li>
    );
  },

  handleClick: function(e) {
    e.preventDefault();
    this.props.callback();
  }
});

Правильно ли передавать пропуски дважды, как это, или я должен каким-то образом ссылаться на его наследование?

Я вижу метод transferPropsTo в документах, и из регистрации он выглядит так, как будто я мог добраться до callback от потомка через this.props.__owner__.props, но эти двойные подчеркивания заставляют меня думать, что я не должен.

4b9b3361

Ответ 1

Да, это идиоматично. Подумайте о каждом компоненте как о функции, аргументы которой являются реквизитами - с этой точки зрения, прохождение вокруг реквизита явно кажется намного более нормальным. Мы обнаружили, что это делает вещи более удобными для того, чтобы все было явным, чтобы вы могли видеть, что все входы в компонент и что именно вы передаете.

(В будущей версии React, вероятно, будет включена функция под названием "контексты", которая дает возможность передавать вещи неявно, но это, вероятно, сделает код сложнее рассуждать, поэтому я бы по-прежнему предпочитал очевидность почти все время.)

UPDATE (не оригинальным автором)

Наконец, была добавлена ​​документация (она была добавлена ​​где-то между летом 2015 года и летом 2016 года, возможно с выпуском 0,14):

Официальная контекстная документация.

Обратите внимание, что это также означает, что react-redux упрощает передачу хранилищ через иерархию.