1. React 返回多个组件
function Component()
{
return (
<p>一个p标签</p>
<h1>一个一级标题</h1>
)
}
对于不同的组件,需要用小括号括起来,否则 React 只会返回最上面的那个。如果是整个组件返回,用 div 标签括起来
另外,不要滥用空标签 <>,例如使用 <Carousel> 和 <Carousel.Item> 之间如果使用 <> 空标签隔开,会导致 Carousel 无法识别对应的 Carousel.Item!
2. React Router 库
0.
从 react-router-dom
中引入
1.
设计哲学:React 认为,网站纯粹是组件的集合,它是没有“分网页”的概念的。React呈现“分网页”的效果即是使用React Router库,在导航到不同页面时呈现不同的组件。
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout/>} >
<Route path="index" element={<Home/>}/>
<Route path="about-us" element={<AboutUs/>}/>
<Route path="*" element={<NoneExist/>}/>
</Route>
</Routes>
</BrowserRouter>
Route 组件们成树状结构,父节点的组件在子节点中也会呈现。因此可以把网站导航栏等组件放在最外层的 path="/" 的组件中。
path = "/" 表示在(网页树)里它对应节点的所有子节点。path = "*" 表示用户如果输入了不在列表里的链接会呈现的组件。
2. 在父节点里排版
使用 <Outlet/>
标签为子节点提供的组件做占位。
例如
<div>
<BadgerBudsNavbar />
<div style={{ margin: "1rem" }}>
<BadgerBudsDataContext.Provider value={[buds,setBuds]}>
<Outlet moveCat={moveCat}/>
</BadgerBudsDataContext.Provider>
</div>
</div>
3. 使用按钮进行跳转
(在作业中未涉及)
使用 useNavigate 钩子
const navigate=useNavigate();
function handleClick()
{
navigate("/home");
}
//...
<Button onClick={handleClick}>Go home</Button>
4. 参数传递,以及useContext
1. 传递函数:
function Component1(prop)
{
function remove(prop){};
return <Component2 remove={remove}/>
}
function Component2(prop)
{
let x;//something about x
return <Button onClick={()=>prop.remove(x)}>Click this</Button>
}
注意,只有在最终调用的时候才需要传参,中间不用传!
另外,含参调用必须使用回调函数,否则 React 会在页面渲染时先行计算函数值,将函数返回值作为常量处理。
2. useContext
头文件
import {createContext} from "react"
先定义
const MyDataContext=createContext();
其中括号里的东西是这个Context的默认值。
再使用到组件中(注意这个文件只需要引入 MyDataContext 和 useContext 而不需要引入 createContext)
function ParentComponent()
{
const[data,setData]=useState();//useState内容略
return (
<MyDataContext.Proider value={data}>
<ChildComponent></ChildComponent>
</MyDataContext.Proider>
)
}
funtion ChildComponent()
{
const data=useContext(MyDataContext)
}
按照上面的代码,则 data 在被传递到的组件中是只读的。如果想要 data 可以修改,则应该这么设置: value={[data,setData]}
(可以把 [data,setData] 视作是一种数据类型)。同理,useContext 可以传递各种类型的数据。
坑点
配合 ReactRouter 使用时,Outlet 组件不会被包裹在 ContextProvider 当中
真的吗?待求证
//示例代码
5. sessionStorage 和 localStorage
0. 基本概念
sessionStorage 中译:会话存储。其中存储的数据在网页刷新后仍然保存(react变量会清空),但在浏览器关闭后会清空。
localStorage 中译:本地存储。其中存储的数据在浏览器关闭后仍然保存。(显然匿名模式下不会保存)。
特别注意:分别用 http 和 https 连接同一网站,sessionStorage 存储的空间是不一致的!
sessionStorage 和 localStorage 的数据均采用键值对的形式存储,但是,其中的值只能是字符串形式
1. 使用
不需要引入头文件。
sessionStorage.setItem("key",JSON.stringfy(data));
if(sessionStorage.getItem("key"))
sessionStorage.removeItem("key");
sessionStorage.clear();
sessionStorage 存储的都是字符串形式,所以用 JSON.parse() 和 JSON.stringfy 实现 JS Object 和字符串间的互相转化!
另外,react 并不会关心 sessionStorage 的变化。如果 sessionStorage 改变了而页面上没有改变了的变量,使用 props.apply()
强制渲染。
6. 其它内容
1. Carousel组件
实现幻灯片轮播效果。具体写法网上抄代码。
2. 关于传参时的数组
众所周知,通过组件传参后,数组会变成 Object ,无法使用 .map .filter 等方法。
应对这个问题,可以使用 Object.keys(props)
或 Object.values(props)
方法。他们的功能是将 prop 这个 Object 里的 Key 或 Value 提取出来组成一个数组。
3. CSS 设定图片比例
aspectRatio:1/1
过去的版本会用 padding-top 等方法,不过现在已经进入了历史的垃圾堆。
标签:function,sessionStorage,React3,Object,React,W6,组件,HW5,data From: https://www.cnblogs.com/ss80194/p/18110598