0
267
ViewsReactjs llama dinámicamente a los componentes que tienen tarjetas debajo de los paneles de pestañas usando una matriz
Aquí es donde se define el encabezado de la pestaña y el contenido de la pestaña, la expectativa es que Tabs_content tiene un nombre de componente, y debajo de tabpanel debe atravesar la matriz tabs_content y mostrar el componente < AddQueueCard /> y llamar al componente que se muestra en la imagen 3
let tabs_data= ['Add Queue','Edit Queue','Remove Queue']; let tabs_content= ['<AddQueueCard />','EditQueueCard','C content' ]; <div class="card-body"> <div class="tab-content"> <div class="tab-pane active"> <div> <div id="test"> <Tabs> <ul> <TabList> {tabs_data.map(i => ( <Tab>{i}</Tab> ))}`***enter code here***` </TabList> </ul> {tabs_content.map(i => ( <TabPanel> {i} {/* here I want to call cards dynamically like <AddQueueCard /> <EditQueueCard> if clicked on 1st or 2nd tab respectively. How do I do that */} </TabPanel> ))} </Tabs> </div> </div> </div> <div class="tab-pane"> </div> </div> </div> 
·
Santiago Gelvez
1 answers
Answer question0
Simplemente pase el Componente en sí, pero es mejor tener un diccionario de componentes separado y recorrerlo para representar el componente dinámico, no mezcle el componente y otras cosas en una matriz, si lo hizo, tiene que encontrar una manera de detectar que el elemento reacciona componente y luego renderizarlo.
let tabs_data= ['Add Queue','Edit Queue','Remove Queue']; let tabs_content= [AddQueueCard, EditQueueCard, 'C content']; <div class="card-body"> <div class="tab-content"> <div class="tab-pane active"> <div> <div id="test"> <Tabs> <ul> <TabList> {tabs_data.map((i) => ( <Tab>{i}</Tab> ))} </TabList> </ul> {tabs_content.map((Item) => { return <TabPanel> {typeof Item === "function" ? <Item /> : Item} </TabPanel> })} </Tabs> </div> </div> </div> <div class="tab-pane"></div> </div> </div>;
·
Santiago Gelvez
Report
Answer question