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

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

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

Answer 2

每当React向DOM componentDidMount添加一个组件时，它就会触发，无法解决这个问题。

在您的情况下，当您切换标签时，我认为React 卸载 TabPanel组件的当前内容，安装新内容，即您的Sample组件，一旦安装，将触发componentDidMount方法。

根据您的AJAX调用返回的内容，您可能应该重新考虑放置AJAX调用的位置。

Answer 3

我刚刚遇到了同样的问题。您的所有组件都必须同时存在，并使用this.STATE.tabIndex和CSS来控制不可见性。

使用受控模式创建标签页

class App extends Component {
  constructor() {
    super();
    this.state = { tabIndex: 0 };
  }
  render() {
    return (
      <Tabs onSelect={tabIndex => this.setState({ tabIndex })}>
        <TabList>
          <Tab>Title 1</Tab>
          <Tab>Title 2</Tab>
        </TabList>
        <div style={this.state.tabIndex===0 ? 
          {display:"block"}: {display:"none"}} >
        </div>
        
        <div style={this.state.tabIndex===0 ? 
          {display:"block"}: {display:"none"}} >
        </div>

      </Tabs>
    );
  }
}

每次切换选项卡时，选项卡都会调用componentDidMount

3 个答案: