首页 > 其他分享 >CS571 W6/HW5 -React3 笔记

CS571 W6/HW5 -React3 笔记

时间:2024-04-02 15:15:27浏览次数:21  
标签:function sessionStorage React3 Object React W6 组件 HW5 data

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

相关文章

  • mingw64 cmake build command
    mingw64cmake buildcommand cmake_minimum_required(VERSION3.5)project(00_qt_helloVERSION0.1LANGUAGESCXX)set(CMAKE_INCLUDE_CURRENT_DIRON)set(CMAKE_AUTOUICON)set(CMAKE_AUTOMOCON)set(CMAKE_AUTORCCON)set(CMAKE_CXX_STANDARD11)set(CMAKE......
  • 【CPL-2023】W6笔记-函数
    函数如何问问题重视整理问题证明自己的努力首先自行解决不要首先问封装函数:同样的需求反复出现复制粘贴(造成代码风险)超过三次函数的名称增加代码的可读性函数的声明=函数原型 函数的定义函数声明省略参数,默认会以int解析调用时需要匹配参数类型和参......
  • Windows + MinGW-W64 Boost程序库 环境配置踩坑指南
    Windows+MinGW-W64Boost程序库环境配置踩坑指南本文仅在博客园由aquawius发布,请在转载注明本链接,我这里就不写开源协议了,总之盗文章的马没了就完了。0x00关于MinGW-W64的安装你可以自己选择,我使用的来自github的w64devkit,这个工具内置了比较多的小工具,在linux中有许......
  • Windows + MinGW-W64 Boost程序库 环境配置踩坑指南
    Windows+MinGW-W64Boost程序库环境配置踩坑指南0x00关于MinGW-W64的安装你可以自己选择,我使用的来自github的w64devkit,这个工具内置了比较多的小工具,在linux中有许多工具windows用不了,w64devkit里边就有提供(甚至包括vim!!)添加bin目录到环境变量就可以了.0x01关于Bo......
  • PW6603USB PD 协议 SINK 端输出控制器芯片
    在当今的快充技术领域,USB PD 协议已经成为主流。而为了实现更高效的充电,一个关键的组件就是 SINK 端输出控制器芯片。在这个主题中,我们将深入探讨 泛海微PW6603USB PD 协议 SINK 端输出控制器芯片的相关特点和优势。首先,让我们了解一下 USB PD 协议。它是一种基于 USB......
  • Windows11 操作系统 SysWOW64 文件夹的作用
    Windows11操作系统中的SysWOW64文件夹是一个重要的系统目录,它在某些方面扮演着特殊的角色。在这篇文章中,我将详细介绍SysWOW64文件夹的作用,并举例说明它在操作系统中的具体应用。首先,让我们了解一下该文件夹的背景和目的。SysWOW64文件夹是Windows64位操作系统中的一个关......
  • Can't delete myfile.mexw64 after run mexw64?
    Ifoundmyanswer,this".mexw64"cannotbedeletedafterusingclear,butcanbedeletedafterusingclearallfromhttps://www.mathworks.com/matlabcentral/answers/1563471-can-t-delete-myfile-mexw64-after-run-mexw64......
  • 具有高速开关、RGW80TS65EHRC11、RGW80TS65HRC11、RGW60TS65CHRC11 650V场终止沟槽型I
    1、应用太阳能逆变器UPS焊接IH功率因数校正2、规格1、RGW80TS65EHRC11IGBT沟槽型场截止650V通孔TO-247NIGBT类型:沟槽型场截止电压-集射极击穿(最大值):650V电流-集电极(Ic)(最大值):80A电流-集电极脉冲(Icm):160A不同 Vge、Ic时 Vce(on)(最大值):1.9V@15V,40A功率......
  • Windows10 环境下使用 Cmake 和 MinGW-w64 编译安装 OpenCV 4.0.1
    Windows10环境下使用Cmake和MinGW-w64编译安装OpenCV4.0.1翻译搜索复制......
  • MinGW-w64、cmake 安装
    介绍MSVC:即MicrosoftVisualC++Compiler,即微软自己的编译器我们下载Windows下的OpenCV时,会带两个文件夹VC14,VC15(分别与VisualStudio的版本有对应关系),这两个文件夹下的库可以直接运行不需要编译将VS作为Qt的开发环境也是使用这个编译器的缘故MinGW:我们都知道GNU在Linux下面......