[英]Reactjs Dynamically call components having cards under tabpanels using array
這是 Tab header 和標簽內容定義的地方,期望是 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>
只需傳遞 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>;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.