请教一个react使用tabs,点击左面菜单,右面内容发生变化的问题
山城忙碌人 2018-09-19 10:09:02 一:测试代码
1 内容区域的代码
<Content style={{ margin: '24px 24px 0', height: '100%' }}>
<Tabs onChange={this.onChange}
activeKey={this.state.activeKey}
type="editable-card"
onEdit={this.onEdit}>
{this.state.panes.map(pane =>
<TabPane tab={pane.title} key={pane.key} closable={pane.closable}>{pane.title }+ {pane.content}</TabPane>
)}
</Tabs>
<Redirect exact from="/" to={baseRedirect} />
<Route render={NotFound} />
</Content>
2 点击左面菜单后,内容区域变化的代码
componentWillReceiveProps = (nextProps) => {
//省略部分代码
panes.push({
title: title, content: getRoutes(match.path, routerData).map(item => (
<AuthorizedRoute
key={item.key}
path={item.path}
component={item.component}
exact={item.exact}
authority={item.authority}
redirectPath="/exception/403"
/>
)), key: activeKey
});
this.setState({ panes, activeKey });
}
3 菜单切换项的代码
onChange = (activeKey) => {
this.setState({ activeKey });
};
二 目前遇到的问题
1 点击tabs卡片后,onChange 这个方法正常执行 ,state中的参数activeKey正常变化 ,TabPane 中的内容如果是组件,组件内容不会发生变化。如果TabPane 的内容是文字,一切正常.
2 TabPane 里面的组件,组件的componentDidMount方法,当前打开了多少个卡片,该方法就要执行多个次。