Imagine una situación en la que un determinado componente devuelve:
<Component1> <Component2 name="It's my name"/> </Component1>ahora lo que me gustaria lograr es algo como esto
<Component1 some_property={getComponent2'sName} //which evaluates to It's my name > <Component2 name="It's my name"/> <Component1>¿es posible? ¿Si es así, cómo?
Para el contexto: ambos componentes son de (diferentes) paquetes externos, no estoy dando un ejemplo específico ya que el código es demasiado complicado aquí y solo causaría un dolor de cabeza innecesario.
Puede definir un contexto, usando React.createContext(), React.useContext y reducer, puede, puede ver un ejemplo en este archivo: ejemplo de contexto
Donde definí 3 acciones para el reductor, agregar para agregar un componente a su conjunto de componentes, eliminar para eliminar un componente en una posición y limpiar para limpiar su conjunto. ¿Cómo puedes usar este contexto? Primero pon el contexto en el código donde quieras usarlo
<YourContextName> {Your react code} </YourContextName>¿Cómo llamarlo? Use el gancho useYourContextName() para definir sus variables de estado dentro del componente principal
const { yourContextNameState, setYourContextNameState } = useYourContextName();Luego puede usar yourContextNameState para acceder a los atributos de su componente
<Component1 some_property={yourContextNameState.components[0].Name}> <Component2 name={yourContextNameState.components[0].Name}></Component2> </Component1>Siempre que desee agregar un componente, use:
setYourContextNameState({type: "add", newComponent: {your object}});No se preocupe, parece un código grande y difícil, pero es muy fácil, solo puede reutilizar el código en cualquier lugar que desee.
La forma más sencilla de hacer esto sería almacenar la cadena "Es mi nombre" en una variable en el componente que representa Componentes1 y Componentes2. Tal vez algo como esto: pregunte si hay alguna confusión.
function ParentComponent() { const [name, setname] = useState("This is my name"); return ( <Component1 some_property={name}> <Component2 name={name}></Component2> </Component1> ); }