当前位置：首页 > article >正文

React（二）

article 2024/11/20 8:07:46

文章目录

项目地址
七、数据流
- 7.1 子组件传递数据给父组件
- - 7.1.1 方式一：給父设置回调函数，传递给子
  - 7.1.2 方式二：直接将父的setState传递给子
- 7.2 给props传递jsx
- - 7.2.1 方式一：直接传递组件给子类
  - 7.2.2 方式二：传递函数给子组件
- 7.3 props类型验证
- 7.4 props的多层传递
- 7.5 className的传递以及合并
八、State进阶
- 8.1 不同组件之间的状态共享
- - 8.1.1 组合组件
  - 8.1.2 找到公共父组件设置状态
  - 8.1.3 根据组件的功能添加事件
  - 8.1.4 两个子组件的设置
- 8.2 获取上一次的状态，解决异步问题
- 8.3 useReducer集中处理状态更新逻辑
九、处理组件错误
- 9.1 处理组件错误
- 9.2 组件懒加载：分割页面，提高页面速度
- 9.3 引入svg图标
- - 9.3.1 方式一：和图片导入方式一样
  - 9.3.2 方式二：将svg文件当作组件导入
- 9.4 使用绝对路径导入
- 9.5 使用Children防止过度嵌套
- 9.6 受控组件和非受控组件
- - 9.6.1 受控组件
  - 9.6.2 非受控组件
十、自定义组件

项目地址

教程作者：
教程地址：

代码仓库地址：

所用到的框架和插件：

七、数据流

7.1 子组件传递数据给父组件

7.1.1 方式一：給父设置回调函数，传递给子

父组件的设置

在这里插入图片描述
子组件

7.1.2 方式二：直接将父的setState传递给子

···

该方法父子严重耦合，复用性低，适合父子严重绑定的组件

7.2 给props传递jsx

定义个导航条，可以是组件形式，也可以直接是jsx const nav = <div</div>

//导航组件
function Nav() {
   
  return (
    <div className="menu">
      <a href="/">首页</a>
      <a href="/product">产品</a>
      <a href="/user">用户</a>
    </div>
  );
}

7.2.1 方式一：直接传递组件给子类

父类拥有导航组件的控制权

在这里插入图片描述

子组件使用：直接使用

function Layout({
     nav, children }) {
   
  return (
    <div className="container">
      <nav>{
   nav}</nav>
      <main>{
   children}</main>
    </div>
  );
}

7.2.2 方式二：传递函数给子组件

由于传递的组件以函数形式传递，控制权在子

子组件使用：加了反斜杠，以组件形式使用

function Layout({
     Nav, children }) {
   
  return (
    <div className="container">
      <nav>{
   <Nav />}</nav>
      <main>{
   children}</main>
    </div>
  );
}

7.3 props类型验证

子组件添加验证

可以使用TypeScripts来验证

7.4 props的多层传递

祖父组件需要传递数据

function App() {
   
  const userData = {
   
    count: 32.95,
    rate: "↑8.98%",
  };

  return (
    <main className="container">
      <UserDataCard message="hello world" userData={
   userData} />
    </main>
  );
}