当 ReactStrap Tab 被选中或处于活动状态时如何加载它的内容？

Question

我正在使用 ReactJS 和 ReactStrap 在我的页面上创建选项卡。
当我打开包含选项卡的页面时，所有选项卡内容的组件都安装在页面加载中，但我希望在该特定选项卡处于活动状态时加载组件。
我的代码

ReactStrap 选项卡示例

Answer 1

下面是来自 ReactStrap Tab 示例的修改后的代码片段。查找里面的内容<TabPane></TabPane>。

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      activeTab: '1'
    };
  }

  toggle(tab) {
    if (this.state.activeTab !== tab) {
      this.setState({ activeTab: tab });
    }
  }
  render() {
    return (
      <div>
        <Nav tabs>
          <NavItem>
            <NavLink
              className={classnames({ active: this.state.activeTab === '1' })}
              onClick={() => { this.toggle('1'); }}>
              Tab1
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink
              className={classnames({ active: this.state.activeTab === '2' })}
              onClick={() => { this.toggle('2'); }}>
              Moar Tabs
            </NavLink>
          </NavItem>
        </Nav>
        <TabContent activeTab={this.state.activeTab}>
          <TabPane tabId="1">
            { this.state.activeTab == 1 ? <h4>Tab 1 Contents</h4> : null }
          </TabPane>
          <TabPane tabId="2">
            { this.state.activeTab == 2 ? <h4>Tab 2 Contents</h4> : null }
          </TabPane>
        </TabContent>
      </div>
    );
  }
}

希望能帮助到你。