Estoy construyendo un componente React usando el patrón compuesto de la siguiente manera:
import React from "react"; function Card({ children }) { return <div>{children}</div>; } function Heading({ children }) { return <h2>{children}</h2>; } export Heading; export default Card;No estoy seguro de por qué no puedo usar la exportación como se indica arriba. Sin embargo, cuando lo hago
Card.Heading = Heading; export default Card;Ahora puedo consumir de la siguiente manera:
<Card> <Card.Heading>hello</Card.Heading> </Card> Estoy tratando de averiguar por qué Card.Heading = Heading funciona como se esperaba. ¿Es válido adjuntar componentes de reacción usando notación de punto [.] como lo hice yo?
Su primer intento no funciona porque no adjuntó la Card al Heading antes de exportar. Una exportación no los adjunta, de hecho, los importaría así (supongo que estamos en un archivo llamado Components.js ):
import Card {Heading} from "Components";Eso se ha dicho, debido a que un componente debe ser independiente, no deberías (incluso si es válido, ya que las funciones son objetos en JavaScript) adjuntarlos así para facilitar la lectura:
Card.Heading = Heading;Si desea consumir diferentes componentes como uno solo con propiedades, haría algo como esto:
function Card({ children }) { return <div>{children}</div>; } function Heading({ children }) { return <h2>{children}</h2>; } export Heading; export Card; // or /* export default { Heading Card }*/Luego, donde necesite esos componentes, haga esto:
import * as Component from "Components" // for the first export // import Component from "Components" // for the second one; function App({ children }) { return( <Component.Card> <Component.Header /> {children} </Component.Card>;) } export default App;Supongo que este es un patrón válido.
Dado que los componentes de React son funciones y las funciones son objetos de primera clase, es válido asignar propiedades como lo ha hecho. Vea el extracto aquí.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
En cuanto a la importación de la Card , si desea usar la Card en otro archivo, debe hacer lo siguiente.
import Card from './Card' ya que es la exportación predeterminada.
Alternativamente, puede cambiar la exportación para que se vea así.
export default { Heading, Card }Puede usar la función de flecha, esto debería solucionar su problema.
import React from "react"; function Card({ children }) { return <div>{children}</div>; } export const Heading = ({ children }) => { return <h2>{children}</h2>; } export default Card;Al importar desde otro archivo:
import Card, { Heading } from 'file emplacement';