首页 > React实现单页面时如何切换内容

React实现单页面时如何切换内容


最近在学React,想仿这个网站http://m.maizuo.com/v4/,header和sideBar是公共的,因此需要改变的地方主要是{内容区域},因为我刚开始学React,所以一开始实现 内容区域 切换时,是以下面代码实现的:
点击“区域”或者“用户”按钮时,在事件回调函数执行以下代码:

当点击“区域” 按钮时:
React.render(<CityContent cityArr={cityArr} />,document.getElementById("主内容区域id"))

React就会在开发者工具提示warming: data-reactid会重复,因此我得出的结论是:每次执行React.render方法,data-reactid会重新开始计算(.0开始),所以导致data-reactid重复,所以我这种做法是错的!React.render在整个页面周期只能调用一次?

我的问题是:大家一般是怎么处理这个问题的? 是点击 "区域"或者"用户"的按钮时,让最上层组件(如整个页面)更改state,然后内容区域组件根据最上层组件的state的值,render: return 不同的 内容(如电影列表、区域选择页、用户页、登录页)?


你需要这个:https://github.com/rackt/react-router

react-router 的 Guide 页也介绍了不实用 react-router 你应该怎么做页面的切换问题:https://github.com/rackt/react-router/blob/master/docs/Introduction.md

【热门文章】
【热门文章】