Pasar datos de un nieto a los padres en Reaccionar

0

Pregunta

Hola tengo un array llamado info[] en un nieto de componentes y quiero que mi padre componente cuando se hace clic en un botón para acceder a la matriz. Yo también quiero un hermano / a componente a tener acceso a ella. ¿Cómo es esto posible .. estoy un poco confundido. Debo usar-contexto ?

Gracias!

2
0

Si desea compartir estado entre los muchos componentes diferentes en su aplicación, y usted cree que el paso del Estado como una proposición es "un viaje muy largo" para moverse soy probablemente debería considerar algo como el contexto de uso de gancho.

De cualquier manera lo que usted acaba de describir parece un simple caso de uso de la bruja no necesita contexto.

Lo que usted debe hacer es: En los padres, que han de [estado, setState] En el componente de corriente de pasar setStat como un refuerzo al niño componente y, a continuación, desde niño componente pasar setState como un apoyo a nieto / a componente.

A continuación, en nieto componente, puedes hacer algo como: props.setState(matriz). Así que ahora en el principal componente de la variable de estado se han actualizado con el valor de la matriz de el nieto de componentes.

Si desea pasar del estado a los hermanos componente, y por el hermano supongo que te refieres hermano del padre, Entonces usted debe mover el estado de los padres, un nivel más arriba digamos que el padre del padre.. y hacer lo que yo he descrito anteriormente.

Para crear useState de alta en el árbol de componentes, Y pasar del Estado y setState así a los niños como objetos, setState se pasa como función, así que usted puede llamar en el nieto componente o a cualquier otro componente

2021-11-17 17:21:19
0

Si he de entender lo que le están pidiendo que podría ser algo como esto.

const GrandChild = ({ setParentInfo }) => {
  const info = [1, 2, 3];

  const handleClick = () => {
    setParentInfo(info);
  };

  return <button onClick={handleClick}>Set parent info</button>;
};

const Sibling = ({ parentInfo }) => {
  return <div>{parentInfo.length}</div>; // Do whatever you need with parentInfo
};

const Parent = () => {
  const [parentInfo, setParentInfo] = useState([]);

  return (
    <div>
      <GrandChild setParentInfo={setParentInfo} />
      <Sibling parentInfo={parentInfo} />
    </div>
  );
};

Aquí no necesitas contexto, porque usted no tiene esa cantidad de capas, pero si usted necesita para obtener detalles de los accesorios que uso un contexto.

2021-11-17 17:14:03

En otros idiomas

Esta página está en otros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Slovenský
..................................................................................................................