Quiero comunicarme desde mi componente secundario (un formulario de entrada) a mi componente principal (ventana emergente) si hay datos en el elemento secundario.
El problema al que me enfrento es que el componente secundario no es un elemento secundario establecido en el código que recibe con la etiqueta {props.children} :
Estructura de la aplicación.js:
<div> <Popup> </Child> </Popup> </div>Estructura Popup.js:
<div> {this.props.children} </div>¿Hay alguna manera de hacer esto sin usar una variable window.* o frankenstein-ing una función stateSet/stateRead en mi App.js?
He hecho algunas cosas arriesgadas aquí, pero hace el trabajo:
import React, { useEffect, useState } from "react"; export default function NewApp() { return ( <Parent pProps="boss"> <Child text="Hello1" /> <Child text="Hello2" /> <Child text="Hello3" /> </Parent> ); } function Parent(props) { const [children, setChildren] = useState([]); function communicateWithMe(val) { console.log("I am called", val); } useEffect(() => { let _children = React.Children.map(props.children, (child) => { console.log("Parent child", child); return { ...child, props: { ...child.props, callBack: communicateWithMe } }; }); console.log("_children", _children); setChildren(_children); }, []); return ( <div style={{ background: "black", color: "white" }} > {children} </div> ); } function Child(props) { console.log(props); return ( <div> <p>{props.text}</p> {props.callBack && ( <button onClick={() => { props.callBack("children baby"); }} > invoke Parent function </button> )} </div> ); }aquí está la versión sandbox para verlo en acción: https://codesandbox.io/s/sad-wood-5kuit3?file=/NewApp.js
Explicación:
Lo que pretendía hacer era agregar los accesorios a los elementos secundarios del componente principal. Para hacer eso, arrojé a los niños (recibidos en accesorios por Parent) en el estado local. Anexó el accesorio a cada niño para tener una función de devolución de llamada para comunicarse con el padre. El componente principal ahora devuelve la variable de estado que tiene los accesorios modificados/agregados, en lugar de devolver prop.children tal como se recibió.
EDITAR:
Como se sugirió, he usado React.Children para iterar sobre los niños recibidos por el padre en los accesorios.