Reactjs 使用数组动态调用在选项卡面板下具有卡片的组件-解网

问：

这是定义 Tab 标题和选项卡内容的地方，期望Tabs_content具有组件名称，在 tabpanel 下，它应该遍历数组tabs_content并显示组件< AddQueueCard /> 并调用图 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>

javascript reactjs react-native jquery-ui-tabs

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>;

Reactjs 使用数组动态调用在选项卡面板下具有卡片的组件

Reactjs Dynamically call components having cards under tabpanels using array

评论

评论