请教一个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方法,当前打开了多少个卡片,该方法就要执行多个次。



...全文
1764 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
山城忙碌人 2018-09-25
  • 打赏
  • 举报
回复
引用 5 楼 weixin_41778539 的回复:
componentDidMount只在页面第一次渲染的时候会调用一次,里面的内容你可以通过定义一个变量结合一个三目运算符的方法来实现不同的组件

好的,谢谢提供思路
XuanPrince 2018-09-23
  • 打赏
  • 举报
回复
componentDid
XuanPrince 2018-09-23
  • 打赏
  • 举报
回复
componentDidMount只在页面第一次渲染的时候会调用一次,里面的内容你可以通过定义一个变量结合一个三目运算符的方法来实现不同的组件
山城忙碌人 2018-09-19
  • 打赏
  • 举报
回复
引用 1 楼 weixin_42861240 的回复:
会不会是顺序问题


引用 2 楼 weixin_42861240 的回复:
试下加载完数据再执行


componentDidMount多次执行,或许通过时间判断,距离上一次执行少于300毫秒,直接return,关键是点击tab,内容不切换,这个比较头痛。
葉幺 2018-09-19
  • 打赏
  • 举报
回复
试下加载完数据再执行
葉幺 2018-09-19
  • 打赏
  • 举报
回复
会不会是顺序问题

87,899

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧