es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Crear dinámicamente componentes de React Material UI y luego devolverlos o renderizarlos.

Crear dinámicamente componentes de React Material UI y luego devolverlos o renderizarlos.

17 Jun, 2023 Programación

Necesito crear componentes de pestañas de Material UI de forma dinámica y renderizarlos.
Tengo lo siguiente, dado un array de nombres de pestañas, que dicta la cantidad de pestañas a renderizar.

const tabPanelMarkup = (index, tabMarkup) => {
  return (
    <tabpanel value="{selectedTab}" index="{index}">
      <section classname='no-padding-top margin-bottom-sm margin-top-sm'>
        ...Muchas Divs
        {tabMarkup}                                        
      </section>
    </tabpanel>
  )
}

Es aquí donde necesito construir mi componente de pestañas completo en un bucle.

const buildTabs = () => {
  let markup = '';

  for (let i = 0; i < tabNames.length; i++) {
    if (i === 0) {
      /*
      <div classname="{'page-content'}">
        <muithemeprovider theme="{kbTheme}">
          <genericstabs value="{selectedTab}" onchange="{handleTabChange}">
            <genericstab label="{tabName[i]}" classname="{selectedTab" =="=" 0}=""></genericstab>
          </genericstabs>
      */
    } else {
      /*
      <genericstab label="{tabName[i]}" classname="{selectedTab" =="=" 0}=""></genericstab>
      */
    }
  }
  /*  */

  for (let i = 0; i < tabNames.length; i++) {
    { tabPanelMarkup(0, 'Marcado A') }
  }

  </muithemeprovider>;
  </div>;

  return markup;
};

¿Cómo lo hago?
Gracias.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para crear dinámicamente componentes de pestañas de Material UI y renderizarlos, puedes utilizar la función de mapeo de React para iterar sobre tu array de nombres de pestañas y generar el código necesario para cada pestaña utilizando JSX. Aquí tienes un ejemplo de implementación:

    import { Tabs, Tab } from '@material-ui/core';

const MyTabs = ({ tabNames }) => {
  const [selectedTab, setSelectedTab] = useState(0);

  const handleTabChange = (event, value) => setSelectedTab(value);

  return (
    <tabs value="{selectedTab}" onchange="{handleTabChange}">
      {tabNames.map((tabName, index) => (
        <tab key="{index}" label="{tabName}"></tab>
      ))}
    </tabs>
  );
};

    Este código iterará sobre el array tabNames utilizando la función map y generará un componente de Tab para cada elemento. La propiedad key está establecida en el índice del elemento del array para propósitos de representación interna de React.

    Luego, puedes colocar este componente en tu componente padre y pasar el array de tabNames como una propiedad:

    const MyApp = () => {
  const tabNames = ['Pestaña 1', 'Pestaña 2', 'Pestaña 3'];

  return (
    <div>
      ...
      <mytabs tabnames="{tabNames}"></mytabs>
      ...
    </div>
  );
};

    Esto representará el componente de pestañas generado dinámicamente basado en el contenido del array tabNames.

Comments are closed.