Включение / отключение вкладок реакции-начальной загрузки в React

Question

Я использую вкладки React-bootstrap и хочу, чтобы вкладки включались / отключались динамически.

реагируют на вкладки начальной загрузки

return (
  <Tabs
    activeKey={this.state.key}
    onSelect={this.handleSelect}
    id="controlled-tab-example"
  >
    <Tab eventKey={1} title="Tab 1">
      Tab 1 content
    </Tab>
    <Tab eventKey={2} title="Tab 2">
      Tab 2 content
    </Tab>
    <Tab eventKey={3} title="Tab 3" disabled>
      Tab 3 content
    </Tab>
  </Tabs>
);

Цитата

Answer 1

Разобрались путем условного рендеринга.

class ControlledTabs extends React.Component {
 constructor(props, context) {
 super(props, context);

 this.handleSelect = this.handleSelect.bind(this);
 this.nextTab = this.nextTab.bind(this);

 this.state = {
  key: 1
 };
}

 nextTab(key) {
  this.setState({ key: key })
 }

 handleSelect(key) {
  alert(`selected ${key}`);
  this.setState({ key });
 }

 render() {
  let tab1 = <Tab eventKey={1} title="Tab 1">Tab 1 content</Tab>;
  let tab2 = <Tab eventKey={2} title="Tab 2" disabled>Tab 2 content</Tab>;
  let tab3 = <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab>;

  if (this.state.key == 2) {
   tab2 = <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>;
   tab3 = <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab>;
  }
  if (this.state.key == 3) {
   tab2 = <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>;
   tab3 = <Tab eventKey={3} title="Tab 3">Tab 3 content</Tab>;
  }

  return (
   <Tabs
    activeKey={this.state.key}
    onSelect={this.handleSelect}
    id="controlled-tab-example"
   >
    {tab1}
    {tab2}
    {tab3}
    <button onClick={() => this.nextTab(2)} value="next">Next 2</button>
    <button onClick={() => this.nextTab(3)} value="next">Next 3</button>

   </Tabs>
  );
 }
}