ReactJS - 如何動態創建選項卡？

我有點被ReactJS和react-tabs卡住了。我想在React中動態創建制表符及其內容。我有這樣的功能：ReactJS - 如何動態創建選項卡？

class MyLog extends React.Component{ 
    constructor(props){ 
     // Pass props to parent class 
     super(props); 
     // Set initial state 
     this.state = { 
      data: [], 
      shops: [], 
     } 
     this.apiListUrl = '/backend/MyLog/listApi'; 
     this.apiStoreUrl = '/backend/MyLog/storeApi'; 
    } 

    componentDidMount(){ 
     // Make HTTP request with Axios 
     axios.get(this.apiListUrl) 
      .then((res) => { 
       // Set state with result 
       this.setState({data:res.data.data}); 
      }); 

     axios.get(this.apiStoreUrl) 
      .then((res) => { 
       // Set state with result 
       this.setState({shops:res.data.data}); 
      }); 
    } 

    render(){ 
     // Render JSX 
     return (
      <div> 
       <Title /> 
       <ReactTabs.Tabs> 
        <ReactTabs.TabList> 
         <ReactTabs.Tab>Title 1</ReactTabs.Tab> 
        </ReactTabs.TabList> 
        <ReactTabs.TabPanel>Contents 1</ReactTabs.TabPanel> 
       </ReactTabs.Tabs> 
      </div> 
     ); 
    } 
}

在this.data.shops是用以下結構

0: "testStore" 
1: "testStore2"

我想達到的結果是數據：

<ReactTabs.TabList> 
     <ReactTabs.Tab>testStore</ReactTabs.Tab> 
     <ReactTabs.Tab>testStore2</ReactTabs.Tab> 
</ReactTabs.TabList>

但如何我可以根據this.state.shops中的數據動態創建這兩個選項卡嗎？

來源

2017-08-27 Torben

您只需顯示動態生成的組件列表，但不能在純JSX中執行此操作。

這樣做的最簡潔的方式如下：

<ReactTabs.TabList> 
     { this.state.shops.map(shop => <ReactTabs.Tab>{shop}</ReactTabs.Tab>) } 
</ReactTabs.TabList>

來源

2017-08-27 10:35:43

請用一些解釋來增加您的代碼回答。 – Yunnosch

這不提供問題的答案。要批評或要求作者澄清，請在其帖子下方留言。 - [來自評論]（/ review/low-quality-posts/17156834） – OmG

您可以返回基於您的列表喜歡上了標籤：

render(){ 
      // Render JSX 
      return (
       <div> 
        <Title /> 
        <ReactTabs.Tabs> 
        <ReactTabs.TabList> 
         {this.bindTabs()} 
        </ReactTabs.TabList>  
         <ReactTabs.TabPanel>Contents 1</ReactTabs.TabPanel> 
        </ReactTabs.Tabs> 
       </div> 
      ); 
     } 

    bindTabs(){ 
    return yourDataList.map(item)=>{ 
    <ReactTabs.Tab>item.title</ReactTabs.Tab> 
    } 
    }

bindTabs方法將從yourDataList一個返回所有的值一個。

謝謝

來源

2017-08-27 10:36:35

ReactJS - 如何動態創建選項卡？

回答

相關問題