Как загрузить содержимое вкладки ReactStrap, когда оно выбрано или активно? - PullRequest
Новая
       7

Как загрузить содержимое вкладки ReactStrap, когда оно выбрано или активно?

0 голосов
/ 28 марта 2019

Я использую ReactJS и ReactStrap для создания вкладок на моей странице.
Когда я открываю страницу, содержащую вкладки, компоненты всего содержимого вкладок монтируются при загрузке страницы, но я хочу, чтобы компонент загружался, когдаэта конкретная вкладка активна.
Мой код

Пример вкладки ReactStrap

1 Ответ

0 голосов
/ 18 июня 2019

Ниже приведен фрагмент измененного кода из примера вкладки ReactStrap.Ищите содержимое внутри <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>
    );
  }
}

Надеюсь, это поможет.

...