Reactjs使用数组动态调用标签面板下有卡片的组件

Question

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

Answer 1

只需传递 Component 本身，但最好有一个单独的组件字典并循环通过它来呈现动态组件，不要在一个数组中混合组件和其他东西，如果你必须找到一种方法来检测它item 是 react 组件，然后渲染它。

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