Digamos que tenemos un componente de función simple:
const Dummy = () => { return <div>Dummy</div>; }; export default Dummy;Y digamos que pasamos este componente como accesorio a otro componente:
<App componentA={<Dummy />} componentB={Dummy} /> Y aquí está el código App.js :
import React from "react"; export default function App({ componentA, componentB }) { const ComponentA = componentA; const ClonedA = React.cloneElement(componentA, { anotherProp: "yes" }); const CreatedA = React.createElement(componentA, { anotherProp: "yes" }); const ComponentB = componentB; const ClonedB = React.cloneElement(componentB, { anotherProp: "yes" }); const CreatedB = React.createElement(componentB, { anotherProp: "yes" }); return ( <div> {/* <ComponentA /> */} {/* <ClonedA /> */} {/* <CreatedA /> */} <ComponentB /> {/* <ClonedB /> */} {/* <CreatedB /> */} </div> ); } ¿Cómo puedo extender el componentA A y el componentB B y renderizarlos? Todas las líneas que están comentadas rompen el código.
Aquí está el codesandbox para este código.
así es como conseguí que los seis funcionaran:
const ComponentA = componentA; const ClonedA = React.cloneElement(componentA, { anotherProp: "yes" }); const CreatedA = React.createElement(componentA.type , { anotherProp: "yes" }); const ComponentB = componentB; const ClonedB = React.cloneElement(<ComponentB />, { anotherProp: "yes" }); const CreatedB = React.createElement(componentB, { anotherProp: "yes" }); return ( <div> { ComponentA } { ClonedA } { CreatedA } <ComponentB /> { ClonedB } { CreatedB } </div> ); debe devolver estas variables como { variable } porque contienen elementos, pero en realidad no son elementos.
React.cloneElement() ?El Reaccionar. La función cloneElement() devuelve una copia de un elemento especificado. Se pueden transmitir accesorios y niños adicionales en la función. Usaría esta función cuando un componente principal desea agregar o modificar las propiedades de sus elementos secundarios.
cloneElement() ?Mi cloneElement () Código :
// Component A const ClonedA = React.cloneElement(componentA, { anotherProp: "yes" }); // Component B const ClonedB = React.cloneElement(<ComponentB />, { anotherProp: "yes" });Lo principal que faltaba era envolver el componente B como un elemento, dado que se pasó como un elemento, esto es lo que debe hacer para especificar el elemento que reaccionará para que pueda clonarlo correctamente. comp A se hizo originalmente correctamente, solo que no se insertó correctamente en la declaración.
React.createElement() ?Reaccionar. createElement( type, [props], [... children] ) Crea y devuelve un nuevo elemento React del tipo dado. El argumento de tipo puede ser una cadena de nombre de etiqueta (como 'div' o 'span' ), un tipo de componente de React (una clase o una función) o un tipo de fragmento de React.
createElement() ?Mi código createElement () :
// Component A const CreatedA = React.createElement(componentA.type , { anotherProp: "yes" }); // Component B const CreatedB = React.createElement(componentB, { anotherProp: "yes" }); Lo principal que te faltaba era especificar un tipo al crear tus elementos de reacción. Mi solución a esto fue agregar el .type al componente A para obtener su tipo para que se procesara correctamente. Su componente B se realizó correctamente ya que los accesorios ya se pasaron, un componente reacciona pudo obtener el tipo solo con el accesorio, el componente B simplemente no se insertó correctamente en el retorno.
Puede pasar una instancia de componente y luego clonar el elemento. Pero tenga cuidado aquí: si pasa una nueva propiedad, que el componente no conoce, no se pasará. Entonces, si desea pasar "anotherProp", entonces su componente ficticio también lo necesita como accesorio.
O puede pasar un componente sin llamarlo. Luego, dentro de otro componente, puede "crearlo" de forma familiar, es decir: <ComponentB anotherProp="no" />
Por favor, mire lo siguiente:
export default function App() { return <CompositeComponent componentA={<Dummy />} componentB={Dummy} />; } const Dummy = ({ answer }) => { return <div>Dummy: {answer}</div>; }; const CompositeComponent = ({ componentA, componentB }) => { const ComponentB = componentB; return ( <> {React.cloneElement(componentA, { answer: "yes" })} <ComponentB answer="no" /> </> ); };