ReactJS - タブを動的に作成する方法

Question

私は少しReactJSと反応タブで立ち往生しています。 Reactにタブとその内容を動的に作成したい

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

しかし、どのように：this.data.shopsで

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

が

0: "testStore" 
1: "testStore2" 

が、私は結果があることを達成したい次のような構造を持つデータである：私はこの機能を持っていますthis.state.shopsのデータに基づいてこれら2つのタブを動的に作成できますか？

Answer 1

動的に生成されたコンポーネントのリストを表示するだけで、純粋なJSXではこれを行うことはできません。

これを行うための最も簡潔な方法は以下の通りです：

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

Answer 2

あなたのようなあなたのリストに基づいてタブを返すことができます：yourDataList 1からすべての値を返します

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方法を一つ。

ありがとうございました