Question

我正在使用React并将Gestalt用于UI。但是对我来说，将组件呈现到Tabs中似乎很难。我什至不了解如何做到这一点，甚至可以从以下位置获得文档：https://pinterest.github.io/gestalt/#/Tabs

我正在根据文档编写一些代码，并希望支持将组件包含在Tabs中的方法。格式塔中有4个属性供我们处理Tabs组件。

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

这是文本：“ Boards”，在文档中定义为React.Node。无论是否考虑，我们都可以利用它来包含组件或为每个选项卡呈现的标记。

编写此代码后。我得到的结果是3个按钮板，图钉，主题，并且可以在它们之间进行更改。但是，一旦更改选项卡，我找不到设置内容的方法。

我想将外部组件导入到Tabs中。在选项卡之间更改时，内容也会更改。我该如何处理以上4个属性。

如何使用格式塔图书馆中可用的Tabs组件？

0 个答案: