Как использовать компонент Tabs, доступный в библиотеке Gestalt? - PullRequest
Новая
       27

Как использовать компонент Tabs, доступный в библиотеке Gestalt?

0 голосов
/ 20 декабря 2018

Я работаю с React и использую Gestalt для пользовательского интерфейса.Но мне кажется трудно перевести мой компонент во вкладки.Я не совсем понимаю, как сделать так, чтобы здесь была доступна даже документация: https://pinterest.github.io/gestalt/#/Tabs

Я пишу битовый код в соответствии с документацией и хочу поддержать способ включения моего компонента во вкладки,У нас есть 4 атрибута для работы с компонентом Tabs в Gestalt. 

activeTabIndex :number
-
onChange: ({ event: SyntheticMouseEvent<>, activeTabIndex: number }) => void
-
tabs: Array<{| text: React.Node, href: string |}>
-
wrap: boolean

The Example: 
    class TabExample extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      activeIndex: 0
    };
    this.handleChange = this._handleChange.bind(this);
    }
    _handleChange({ activeTabIndex, event }) {
    event.preventDefault();
    this.setState({
      activeIndex: activeTabIndex
    });
    }
    render() {
    return (
      <Tabs
        tabs={[
          {
            text: "Boards",
            href: "#"
          },
          {
            text: "Pins",
            href: "#"
          },
          {
            text: "Topics",
            href: "#"
          }
        ]}
        activeTabIndex={this.state.activeIndex}
        onChange={this.handleChange}
      />
    );
    }
    }

Дело в тексте: «Доски» в документации определены как React.Node.Я думаю, можем ли мы использовать это для включения компонента или разметки для каждой вкладки.

После написания этого кода.Я получаю в результате всего 3 кнопки доски, булавки, темы и могу переключаться между ними.Но я не могу найти способ установить контент после смены вкладки.

Я хочу импортировать внешние компоненты во вкладки.При переключении между вкладками содержимое также изменяется.Как я могу справиться с этим с 4 выше атрибутов.

...