每次切换标签时，反应标签都会调用 componentDidMount

Question

我正在使用这个反应库：https : //github.com/reactjs/react-tabs，我创建了一个简单的组件，如下所示：

export default class Sample extends Component {

    componentDidMount() {
        console.log("Mount");
    }

    render () {
    return (

            <div>
             Hello
            </div>
    );
  }
}

我已将其插入示例应用程序的选项卡中：

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import Sample from './Sample.jsx';

class App extends Component {
  handleSelect(index, last) {
    console.log('Selected tab: ' + index + ', Last tab: ' + last);
  }

  render() {
    return (


      <Tabs
        onSelect={this.handleSelect}
        selectedIndex={2}
      >

        <TabList>

          <Tab>Foo</Tab>
          <Tab>Bar</Tab>
          <Tab>Baz</Tab>
        </TabList>

        <TabPanel>
          <Sample />
        </TabPanel>
        <TabPanel>
          <Sample />
        </TabPanel>
        <TabPanel>
          <Sample />
        </TabPanel>
      </Tabs>
    );
  }
}

render(<App/>, document.getElementById('container'));

每次我切换 Tab 时componentDidMount都会调用它，我可以Mount在控制台中看到日志。我的问题是如何避免componentDidMount每次都调用该方法，而只在第一次调用它？我提出这个问题是因为我想在其中添加一个 Ajax 调用，并且我不想每次切换选项卡时都进行 Ajax 调用，但只调用一次。

谢谢

Answer 1

您可以forceRenderTabPanel={true}在<Tabs/>组件上使用，以便卡舌保持安装状态。

<Tabs
  onSelect={this.handleSelect}
  selectedIndex={2}
  forceRenderTabPanel={true}
>