选择或激活时如何加载ReactStrap选项卡的内容？

Question

我正在使用ReactJS和ReactStrap在页面上创建标签。
当我打开包含标签的页面时，所有tabs-content的组件都安装在页面加载上，但是我希望在该特定选项卡处于活动状态时加载该组件。
My Code

ReactStrap Tab Example

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

希望有帮助。