前端小白学React系列之——浅仿一下炒股软件（雪球）

api文件夹：用来存放与数据相关的链接，组件所有的数据资源都通过该文件夹中的request.js 获取,不在页面组件中获取，便于以后的操作管理

assets 文件夹：主要用来存放静态资源，像图片，视频之类的资源，达到静态资源的统一操作管理

pages 文件夹：用于放置路由跳转相关的页面

components 文件夹用来放置除去路由页面以外的组件

routes：管理组件的所有路由

技术栈

安装依赖

项目主要功能实现

底部导航栏高亮的实现??

实现的效果

根据路由的性质，Link 标签中的to属性会改变url的中pathname的值，此处还使用了classnames，在每个组件上添加一个动态的类，当地址包含设置的地址值时，将active效果施加给对应的Link

获取数据??

在线接口工具fastmock,提供一个假接口进行在线模拟ajax请求，实现前端的页面数据展示。
点击前往fastmock

实现代码

api目录下的request.js只负责做axios的数据请求
useEffect中使用async + await 实现数据导入
数据导入后通过数组的map方法展示到组件中

轮播图??

实现的效果

useEffect需要传一个[]即空数组当第二个参数，传空数组则表示轮播图的更新什么都不依赖。
swiper轮播实现的：固定的html结构 .swiper-container>.swiper-wrapper>.swiper-slide{n}

模态框??

实现的效果

父子组价传值：父组件向子组件传值，通过，将父组件的传递给了子组件
子组件通过调用父组件传递到子组件的方法向父组件传递消息的。父组件收到参数后将值赋给父组件的state。

父组件 => home组件通过将方法传递给子组件 => Modal组件

子组件 => Modal 通过调用自己的方法去执行父组件=>home的方法
子组件Modal中

只有当时，模态框才得以真正体现

二级路由实现??

实现的效果

实现的代码

//Stock主页面下的index.jsximport React,{useEffect} from 'react'// import StockDetail from './StockDetail'import StockHead from './StockHead'import StockNav from './StockNav'import { Outlet,useNavigate } from 'react-router'import { Wrapper } from './style'export default function Stock() {  const navigate = useNavigate()    useEffect(() => { navigate('/stock/curviews') console.log('--------')  },[])  return (           ...     )}
来源：月落沾衣
                                                        声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！