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

Question

这里定义了Tab header和tab content，期望是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 本身，但最好有一个单独的组件字典并循环遍历它以呈现动态组件，不要在一个数组中混合组件和其他东西，如果你这样做你必须找到一种方法检测该项目是反应组件，然后渲染它。

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