我正在使用这个反应库: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调用,但只有一次。
谢谢
您可以在forceRenderTabPanel={true}
组件上使用<Tabs/>
,以便标签保持安装状态。
<Tabs
onSelect={this.handleSelect}
selectedIndex={2}
forceRenderTabPanel={true}
>
每次React都会向DOM componentDidMount
will添加一个组件,就没有办法解决这个问题。
在你的情况下,当你切换标签时,我假设React卸载TabPanel
组件的当前内容并安装新内容,这是你的Sample
组件,反过来,一旦安装,将触发componentDidMount
方法。
根据您的AJAX调用返回的内容,您可能应该重新考虑放置AJAX调用的位置。
我刚遇到同样的问题。所有组件都需要同时存在,并使用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>
);
}
}