reactjs - react - Reaccionar: pasar apoyos a los descendientes

add meta tags reactjs

Question

¿Hay un patrón recomendado para pasar props a componentes descendientes en React?

A continuación, estoy pasando la callback de callback prop a un componente secundario:

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

Y luego el apoyo de callback se transmite al componente descendiente:

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

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

¿Es correcto pasar el apoyo hacia abajo dos veces así o debería estar haciendo referencia a su herencia de alguna manera?

Veo un método transferPropsTo en los documentos, y desde el registro parece que podría obtener una callback de callback del descendiente a través de this.props.__owner__.props pero esos guiones bajos dobles me hacen pensar que no debería.

Answer 1

Sí, esto es idiomático. Piense en cada componente como una función cuyos argumentos son los apoyos: con esa perspectiva, pasar los apoyos explícitamente parece mucho más normal. Descubrimos que hace que las cosas sean más fáciles de mantener para que todo sea explícito, de modo que pueda ver qué son todas las entradas de un componente y qué es exactamente lo que está pasando.

(Una versión futura de React probablemente incluirá una característica llamada "contextos" que hace posible pasar cosas de manera implícita, pero probablemente hará que sea más difícil razonar el código, así que todavía prefiero la presencia explícita casi todo el tiempo).

ACTUALIZACIÓN (no del autor original)

Finalmente se agregó la documentación (se agregó en algún momento entre el verano de 2015 y el verano de 2016, probablemente con la versión 0.14):

Documentación oficial del contexto reactivo .

Tenga en cuenta que esta es también la forma en que react-redux simplifica el paso de tiendas a través de la jerarquía.