如何将 React JSX 材质 ui 元素转换为字符串

Question

I need to have my jsx in a string (as I am building a dynamic multi tab tab strip), so it could have 1 or 2 or 3 or 4 tabs.

I can't use JSX because the JSX requires that elements be closed and in this case, the closing tags are only applied after the dynamic markup is created.

I have tried pushing the JSX into an array, but that also creates compile errors and following functions are then not seen. (compiler wants to see the end Tags for the begin tags)

I have this:

<div className={'page-content'} >
    <GenericsTabs
        value={selectedTab}
        onChange={handleTabChange}
    >
        <GenericsTab
            label={t("Language")}
            className={selectedTab === 0}
        />
        <GenericsTab
            label={t("Device")}
            className={selectedTab === 1}
        />
    </GenericsTabs>

    {tabPanelMarkup(0, 'Markup A')}

    {tabPanelMarkup(1, 'Markup B')}
</div>

I have also tried this: (building it as a string, but seems not getting the JSX material ui components recognised for what they are (after which I try using import parse from 'html-react-parser'; but the markup gets truncated or has pieces missing and the JSX components don't render what they should.

 const createTabStrip = (tabIndex) =>
 {
  let x = "<div className={page-content} >"
       x=x + " <MuiThemeProvider theme={kbTheme}>"
       x=x + " <tabStrip "
       x=x + "    value={ selectedTab }"
       x=x + "    onChange={handleTabChange}"
       x=x + "  >"

       for (let i=0; i< tabNames.length; i++)
       {
           x= x+ createTab(i)
       }

      for (let i=0; i< tabNames.length; i++)
      {
         x= x + createTabPanel(i)
      }
       
       x= x + closeTabStrip
       return x
  }

If I can just get the 'x=x+ ' bit working, the rest will follow.

Alternatively, I have tried this but no success, as the pushes after the first push, are not recognised for being pushes (they are grey instead of orange (using IntelliJ IDEA as the editor).

Snip to illustrate:

tabComponentJSx.push( <><div className={'page-content'} > )

let tabComponentJSx = [];
const createTabStrip = () =>
{
     let idx = tabNames.length;

     tabComponentJSx.push( <><div className={'page-content'} > )
     tabComponentJSx.push( <MuiThemeProvider theme={kbTheme} >)
     tabComponentJSx.push( <TabStrip value={selectedTab} onChange={handleTabChange} > </TabStrip> )
             
     // Create the tabPanels with the markup for each

     createTab()
     createTab()
             
     {tabPanelMarkup(0, 'Markup A')}
     {tabPanelMarkup(1, 'Markup B')}

     tabComponentJSx.push( </MuiThemeProvider> )
     tabComponentJSx.push( </div> </>)
}

Thx

Answer 1

// Builds the tab with it's name from the props.tabNames array
const createTab = () => {
    let x= []
    for (let i=0; i < tabNames.length; i++)
    {
        x.push( <EachTab label={ t( tabNames[i])} className={selectedTab ===0} /> )
    }
    return x;
}

// Builds each tab's Panel/Content  with the corresponding input elements from the 'tabsMarkup' array
const tabPanelMarkup = () => {
    let tabPanelJSX = [];

    for(let idx = 0; idx < tabNames.length; idx++)
    {
        tabPanelJSX.push(
              <TabPanel value={selectedTab} index={idx}>
                    <section className='no-padding-top margin-bottom-sm margin-top-sm'>
                        <div className={'container-fluid'}>
                            <div className='row'>
                                <div className='col-lg-12'>
                                    <div className='block'>
                                        <div className='row'>
                                            <div className='col-lg-12'>
                                             { tabsMarkup[idx] }
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </TabPanel>
        )
    }

    return tabPanelJSX
}

let tabComponentJSx = [];
const createTabStrip = () =>
{
     tabComponentJSx.push(<div className={'page-content'} style={{ paddingTop:'0px'}}>
                              <MuiThemeProvider theme={kbTheme} >
                                  <GenericsTabs value={selectedTab} onChange={handleTabChange} >

                                     { createTab() }

                                  </GenericsTabs>

                                  {  tabPanelMarkup() }

                              </MuiThemeProvider>
                          </div>
                         )
};


createTabStrip()
return ( tabComponentJSx )