Mientras buscaba un artículo sobre el patrón de componente compuesto, descubrí que el acceso al subcomponente a través de la notación de puntos es posible como un objeto javascript. Cómo esto es posible y cómo ...

-3
GoonGamja 15 mar. 2021 a las 05:02

1 respuesta

La mejor respuesta

Esto se logra simplemente adjuntando el componente compuesto como una propiedad al componente principal.

Adjuntar es cómo mantiene el componente compuesto anidado con su componente principal. La alternativa es exportar Item por separado y luego importarlo también por separado. En muchos casos, el componente secundario anidado es solo válido como descendiente directo del componente principal, consume un contexto o se le informa cómo "diseñar" en el DOM.

Ejemplo:

const Menu = () => <div>Menu Component</div>
const Item = () => <div>Item Component</div>

Menu.Item = Item;

export default Menu;

Uso:

import Menu from '../path/to/menu';

const App = () => (
  <Menu>
    <Menu.Item>Home</Menu.Item>
    <Menu.Item>Blog</Menu.Item>
    <Menu.Item>About</Menu.Item>
  </Menu>
);

Demo

Edit how-dot-notation-works-in-functional-component-of-react-js

Código de demostración:

const Menu = ({ children }) => (
  <div>
    <h1>Menu Component</h1>
    {children}
  </div>
);
const Item = ({ children }) => <div>{children}</div>;

Menu.Item = Item;

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Menu>
        <Menu.Item>Home</Menu.Item>
        <Menu.Item>Blog</Menu.Item>
        <Menu.Item>About</Menu.Item>
      </Menu>
    </div>
  );
}

enter image description here

Pregunta

¿Funciona esto porque el componente también es objeto de javascript?

No, no los objetos, pero los componentes funcionales (y los componentes basados ​​en clases) se transpilan en una función de JavaScript normal invocada por el marco de React, y como referencia de variable puede adjuntarles propiedades.

2
Drew Reese 15 mar. 2021 a las 02:12