Cómo pasar accesorios a {this.props.children}

Question 1

Estoy tratando de encontrar la forma adecuada de definir algunos componentes que podrían usarse de manera genérica:

<Parent>
  <Child value="1">
  <Child value="2">
</Parent>

Por supuesto, existe una lógica para la representación entre los componentes principal y secundario, se puede imaginar <select> y <option> como ejemplo de esta lógica.

Esta es una implementación ficticia para el propósito de la pregunta:

var Parent = React.createClass({
  doSomething: function(value) {
  },
  render: function() {
    return (<div>{this.props.children}</div>);
  }
});

var Child = React.createClass({
  onClick: function() {
    this.props.doSomething(this.props.value); // doSomething is undefined
  },
  render: function() {
    return (<div onClick={this.onClick}></div>);
  }
});

La pregunta es cada vez que usas {this.props.children} para definir un componente contenedor, ¿cómo se transmite alguna propiedad a todos sus elementos secundarios?

Question 2

Para una forma un poco más limpia de hacerlo, intente:

<div>
    {React.cloneElement(this.props.children, { loggedIn: this.state.loggedIn })}
</div>

Editar: para usar con varios niños individuales (el niño en sí mismo debe ser un componente), puede hacerlo. Probado en 16.8.6

<div>
    {React.cloneElement(this.props.children[0], { loggedIn: true, testPropB: true })}
    {React.cloneElement(this.props.children[1], { loggedIn: true, testPropA: false })}
</div>

Question 3

Pase accesorios para dirigir a los niños.

Ver todas las demás respuestas

Pase datos globales compartidos a través del árbol de componentes a través de contexto

El contexto está diseñado para compartir datos que pueden considerarse “globales” para un árbol de componentes de React, como el usuario autenticado actual, el tema o el idioma preferido. ¹

Descargo de responsabilidad: esta es una respuesta actualizada, la anterior usaba la API de contexto anterior

Se basa en el principio Consumidor / Proveer. Primero, crea tu contexto

const { Provider, Consumer } = React.createContext(defaultValue);

A continuación, utilice a través de

<Provider value={/* some value */}>
  {children} /* potential consumers */
</Provider>

y

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

Todos los Consumidores que son descendientes de un Proveedor volverán a renderizar cada vez que cambie la propuesta de valor del Proveedor. La propagación del Proveedor a sus Consumidores descendientes no está sujeta al método shouldComponentUpdate, por lo que el Consumidor se actualiza incluso cuando un componente ancestro sale de la actualización. ¹

Ejemplo completo, semi-pseudocódigo.

import React from 'react';

const { Provider, Consumer } = React.createContext({ color: 'white' });

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: { color: 'black' },
    };
  }

  render() {
    return (
      <Provider value={this.state.value}>
        <Toolbar />
      </Provider>
    );
  }
}

class Toolbar extends React.Component {
  render() {
    return ( 
      <div>
        <p> Consumer can be arbitrary levels deep </p>
        <Consumer> 
          {value => <p> The toolbar will be in color {value.color} </p>}
        </Consumer>
      </div>
    );
  }
}

¹ https://facebook.github.io/react/docs/context.html

Question 4

Pasar accesorios a niños anidados

Con la actualización a Reaccionar 16.6 ahora puedes usar Reaccionar.createContext y contextType.

import * as React from 'react';

// React.createContext accepts a defaultValue as the first param
const MyContext = React.createContext(); 

class Parent extends React.Component {
  doSomething = (value) => {
    // Do something here with value
  };

  render() {
    return (
       <MyContext.Provider value={{ doSomething: this.doSomething }}>
         {this.props.children}
       </MyContext.Provider>
    );
  }
}
 
class Child extends React.Component {
  static contextType = MyContext;

  onClick = () => {
    this.context.doSomething(this.props.value);
  };      

  render() {
    return (
      <div onClick={this.onClick}>{this.props.value}</div>
    );
  }
}

// Example of using Parent and Child

import * as React from 'react';

class SomeComponent extends React.Component {

  render() {
    return (
      <Parent>
        <Child value={1} />
        <Child value={2} />
      </Parent>
    );
  }
}

Reaccionar.createContext brilla donde React.clonElement el caso no pudo manejar componentes anidados

class SomeComponent extends React.Component {

  render() {
    return (
      <Parent>
        <Child value={1} />
        <SomeOtherComp><Child value={2} /></SomeOtherComp>
      </Parent>
    );
  }
}

Question 5

La mejor manera, que le permite hacer la transferencia de propiedad es children como un patrón de función
https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9

Fragmento de código: https://stackblitz.com/edit/react-fcmubc

Ejemplo:

const Parent = ({ children }) => {
    const somePropsHere = {
      style: {
        color: "red"
      }
      // any other props here...
    }
    return children(somePropsHere)
}

const ChildComponent = props => <h1 {...props}>Hello world!</h1>

const App = () => {
  return (
    <Parent>
      {props => (
        <ChildComponent {...props}>
          Bla-bla-bla
        </ChildComponent>
      )}
    </Parent>
  )
}

Pase accesorios para dirigir a los niños.

Pase datos globales compartidos a través del árbol de componentes a través de contexto

Pasar accesorios a niños anidados

¿Ha sido útil esta solución?