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

Question

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

Ниже, я передаю опору 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 но эти дабл-дабл подчёркивания заставляют меня думать, что я не должен.

Answer 1

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

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

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

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

Official React Context Documentation.

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