El acordeón de Mantine especifica que su contenido debe ser solo del tipo Accordion.Item (o AccordionItem); consulte la documentación de los elementos secundarios . Esto significa que incluso las funciones que realmente devuelven AccordionItem no aparecerán en la lista.

Por lo tanto, este componente simple mostrará solo AccordionItem(s) que fueron instanciados en línea, sin embargo, ninguno devuelto por otra función (vea MyAccordionItem en esta aplicación simple ).

El código:

 import React, { Component } from 'react'; import { render } from 'react-dom'; import { Accordion } from '@mantine/core'; const MyAccordionItem = ({children, label}) => <Accordion.Item label={label}> {children} </Accordion.Item>; function App() { return ( <div style={{width: 200}}> <div>pre</div> <Accordion> <Accordion.Item label="section0"> <div>sec0.item1</div> <div>sec0.item2</div> <div>sec0.item3</div> </Accordion.Item> {/* Section 1 is not displayed because it is no of type Accordion.Item <MyAccordionItem label="section 1"> <div>sec1.item1</div> <div>sec1.item2</div> <div>sec1.item3</div> </MyAccordionItem> <Accordion.Item label="section2"> <div>sec2.item1</div> <div>sec2.item2</div> <div>sec2.item3</div> </Accordion.Item> </Accordion> <div>post</div> </div> ); } render(<App />, document.getElementById('root'));

La razón es la función de filtro definida aquí , y utilizada por el acordeón aquí .

Mis preguntas son:

1. ¿Conoce alguna solución alternativa que ayude a asignar el mismo tipo (o, que parezca ser un Accordion.Item al definir su propio componente?
2. A mayor escala, ¿cuál cree que es el enfoque correcto desde la perspectiva de la biblioteca (en este caso, mantine), es decir, debería ser suficiente para comprobar que el tipo devuelto es un elemento de acordeón?