ReactJS 동적으로 탭 메뉴를 만드는 방법

Question

ReactJS를 처음 사용하고 탭 탐색 메뉴를 만들고 싶습니다. 지금까지 React-tabs을 설치했는데 배열 forexample을 기반으로 내 메뉴 탭을 만드는 방법을 모르겠습니다. 누군가가 나를 도울 수 있기를 바랍니다. 당신은 자바 스크립트가 배열의 각 요소에 대해 동적으로 탭을 생성하는지도 사용할 수 있습니다

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; 

export default class TabMenu extends React.Component { 

constructor(props) { 
    super(...arguments); 

    let tabs = [ 
     { 'id': 1, 'name': 'Tab 1', 'url': '/' }, 
     { 'id': 2, 'name': 'Tab 2', 'url': '/' }, 
     { 'id': 3, 'name': 'Tab 3', 'url': '/' }, 
     { 'id': 4, 'name': 'Tab 4', 'url': '/' } 
    ]; 

} 

handleSelect(index, last) { 
    console.log('Selected tab: ' + index + ', Last tab: ' + last); 
} 

render() { 
    return (
    <div className='tabmenu'> 

     <Tabs onSelect={this.handleSelect} selectedIndex={2}> 
     <TabList> 
      <Tab>Tab1</Tab> 
      <Tab>Tab2</Tab> 
      <Tab>Tab3</Tab> 
     </TabList> 

     <TabPanel> 
      <p>blablahblah</p> 
     </TabPanel> 
     <TabPanel> 
      <p>content blabla</p> 
     </TabPanel> 
     <TabPanel> 
      <p>more content blahblah</p> 
     </TabPanel> 
     </Tabs>   
    </div> 
); 
} 


} 

Answer 1

:

여기 SOFAR 내 코드입니다. 다음은 탭을 렌더링 메소드 내에서 접근 가능한 배열로 간주하는 예제입니다.

<TabList> 
    { tabs.map(tab => 
    <Tab key={tab.id}>{tab.name}</Tab>, 
)} 
</TabList>