He visto algunas bibliotecas usar componentes de notación de puntos en React
p.ej
<Menu>
<Menu.Item>Item 1</Menu.Item>
<Menu.Item>Item 2</Menu.Item>
</Menu>
esto está usando la palabra clave estática en el componente de clase, por ejemplo
const Item = () => ...code
class Menu extends Component {
static Item = Item
...code
Dado que los componentes funcionales con los ganchos de React no son componentes de clase, ¿se puede usar este patrón de alguna manera con componentes funcionales (por ejemplo, acceder al prototipo o algo así?)
¿Todavía se puede hacer esto?
Este patrón se llama Componentes compuestos. Para usar el patrón con componentes funcionales, simplemente agregue el subcomponente ( Item) como una propiedad del componente principal ( Menu).
Puede encontrar más información en el artículo de Kent C. Dodds - React Hooks: Compound Components .
const Item = ({ children }) => (<li>{children}</li>);
const Menu = ({ children }) => (<ul>{children}</ul>);
Menu.Item = Item;
ReactDOM.render(
<Menu>
<Menu.Item>Item 1</Menu.Item>
<Menu.Item>Item 2</Menu.Item>
</Menu>,
root
);<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras