reactjs - 选中或激活时如何加载 ReactStrap Tab 的内容？

Question

我正在使用 ReactJS 和 ReactStrap 在我的页面上创建标签。
当我打开包含选项卡的页面时，所有选项卡内容的组件都安装在页面加载上，但我希望组件在该特定选项卡处于事件状态时加载。
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>
    );
  }
}

希望对您有所帮助。