реагировать на вкладки Tablist из отдельного компонента - PullRequest
Новая
       5

реагировать на вкладки Tablist из отдельного компонента

0 голосов
/ 07 ноября 2019

В моем приложении я использую react-tabs для создания навигации по вкладкам. Это работает очень хорошо, когда TabList:

существует внутри компонента Tab, как показано ниже 

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

class App extends Component {
  render() {
    return (
        <Tabs>
          <TabList>
            <Tab>Title 1</Tab>
            <Tab>Title 2</Tab>
            <Tab>Title 3</Tab>
          </TabList>
          <TabPanel>
            <h2>Any content 1</h2>
          </TabPanel>
          <TabPanel>
            <h2>Any content 2</h2>
          </TabPanel>
          <TabPanel>
            <h2>Any content 3</h2>
          </TabPanel>
        </Tabs>
    );
  }
}

render(<App />, document.getElementById('root'));

Но в моем проекте у меня есть требование, как Tablist будет возвращено из другого компонентакак ниже. В этом случае это не работает: 

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

const List = () => {
  return (
      <TabList>
        <Tab>Title 1</Tab>
        <Tab>Title 2</Tab>
        <Tab>Title 3</Tab>
      </TabList>
  )
}

class App extends Component {
  render() {
    return (
        <Tabs>
          <List />
          <TabPanel>
            <h2>Any content 1</h2>
          </TabPanel>
          <TabPanel>
            <h2>Any content 2</h2>
          </TabPanel>
          <TabPanel>
            <h2>Any content 3</h2>
          </TabPanel>
        </Tabs>
    );
  }
}

render(<App />, document.getElementById('root'));

Как решить вышеуказанную проблему?

...