每次切换选项卡时，react选项卡会调用componentDidMount
每次切换选项卡时，react选项卡会调用componentDidMount
提问于 2017-03-06 07:20:15
我正在使用这个react库：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调用，而是只进行一次调用。
谢谢
回答 2
Stack Overflow用户
发布于 2017-03-06 07:59:04
您可以在<Tabs/>组件上使用forceRenderTabPanel={true}，以便选项卡保持挂载状态。
<Tabs
onSelect={this.handleSelect}
selectedIndex={2}
forceRenderTabPanel={true}
>Stack Overflow用户
发布于 2018-06-27 03:59:48
我刚刚也遇到了同样的问题。所有组件都需要同时存在，并使用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>
);
}
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42615244
复制相关文章
相似问题