react 侧边栏固定在首页和商品一览页面,根据不同参数获取数据,全局有效的搜索功能
一个网站首页有header(里面有搜索框),左侧是侧边栏,中右是内容页面。
一开始打开网页会显示首页,内容部分先不显示商品列表,显示来自系统的通知。
点击侧边栏或者搜索商品才会显示商品一览。
1.
我是这么做的
App.js
//header组件,内含搜索功能
//路由组件
路由index.js
//首页组件
首页组件home.js
//左侧侧边栏组件
通知内容
侧边栏组件sub.js
{
data.map((value,key)=>{
return
{
value.subCata.map((v,k)=>{
return
{v.szk}
//首页点击会刷新到一览页面,展示内容,但是在一览页面list的路径下点击就不会刷新内容了,这里也是一个问题,有更好的方法吗?
})
}
})
}
商品一览页面list.js
//因为在进入商品详情页面之前左侧侧边栏要一直显示,我只能用这种笨办法了,有没有其它的方法能解决这个问题。。。
<List
loading = {loading}
itemLayout="vertical"
size="large"
pagination={{onChange: page => {console.log(page);},pageSize: 10}}
dataSource={data}
renderItem={item => (
<List.Item>
<Link to = {`/detail/${item.id}`}><img src=""/></Link>
</List.Item>
)
}
/>
<br/>
</div>
</Content>
</Layout>
</Content>
导航条mainHeader.js
搜索功能
handleSearch=(e)=>{
let itemName = this.state.txt//可以无视,只是获取搜索框的输入内容
this.props.history.push("/list/"+itemName);//和sub一样,在一览页面里再点击搜索就没有反应了。
}
list页面使用
let itemName = this.props.match.params.id
let szk = this.props.match.params.id
来接受的参数
list的axios
axios.get(https://......list?itemName=${itemName}&szk=${szk}&page=${page}&limit=100
)
itemName是搜索框的跳转,szk是从左侧侧边栏的跳转,理想很美好,现实很骨感,实际效果是${itemName}和${szk}在路由
这么设置的情况下是一样的。。。这里就有很大的问题,我希望的是点击侧边栏,提交侧边栏的参数然后在list里根据哪个参数获取数据,点击搜索提交另外一个名字的参数来获取数据。这两个参数对应的是数据json里两个不同的字段。
我能想到的解决办法是获取数据前,把参数丢给后台,后台从数据库获取数据后返回json。
这样像是逃避问题一样,有没有直面它的方法?
- 点赞
- 写回答
- 关注问题
- 收藏
- 复制链接分享
- 邀请回答
1条回答
为你推荐
- 无法在React应用(CORS)中从服务器端(golang)获取Cookie
- 1个回答
- 使用React / Laravel应用程序中断应用程序的刷新页面返回空白页面
- php
- javascript
- 2个回答
- 在本机中发送和获取JSON数据[JSON解析错误]
- React native,如何显示数据库中的特定数据以进行更新
- php
- 1个回答
- 如何将表单发布到两个不同的页面并在提交的页面中使用表单数据?
- php
- 1个回答
- React Native POST数据到API无法正常工作
- php
- javascript
- 1个回答
- dva.js怎么异步获取接口数据
- react.js
- 1个回答
- React Native 在init project 一直卡在安装CocoaPods
- react select 如何从后端获取下拉框的值
- react.js
- 1个回答
- 使用React,怎么在请求头Header里面添加参数?
- 怎么用后台给的数据用React基于bizcharts绘制饼图呢?
- 在react前端中如何使用websocket,有没有相关的例子?
- react.js
- 3个回答
- react 滚动分页列表点击进入详细,然后点击回退按钮,怎么能使回来的页面保持离开前的位置和状态?
- 1个回答
- react native中将view固定在屏幕底部不被keyboard顶起
- 5个回答
- JavaScript和 jquery 和 react三者之间的区别 简单解释一下
- javascript
- jquery
- 3个回答
- react相关问题,如何在多个html页面使用index.js?以及其他的js
- 1个回答
- 前台是用的react-redux,怎么和后台的java连接在一起啊?小白刚学习react,请大神指教
- java
- 3个回答
- 求助react-native跳转页面(navigation)的问题
- 2个回答
- 获取使用react封装的echarts的实体
- 1个回答
- react native 的udp在接收服务器返回的数据的时候用了20s才接收到信息
- 1个回答