05 组件学习3

最新推荐文章于 2024-07-25 22:24:14 发布
最新推荐文章于 2024-07-25 22:24:14 发布
阅读量378 收藏
点赞数
分类专栏： reactjs 文章标签： 学习 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39225271/article/details/127167033
版权

组件学习3

组件通信的意义

组件之间的数据流转

组件通信

  • 父子关系——最重要
  • 兄弟关系——自定义事件模式，eventBus/通过共同的父组件通信
  • 其他关系——vue中使用vuex，react使用mobx/redux/基于hook的方案

父传子实现

实现父子通信中的父传子，把父组件中的数据传给子组件

实现步骤

  1. 父组件提供要传递的数据 - state

  2. 给子组件标签添加属性值为 state中的数据

  3. 子组件中通过 props 接收父组件中传过来的数据

    1. 类组件使用this.props获取props对象
    2. 函数式组件直接通过参数获取props对象
import React, { createRef } from "react"

// APP是父组件,
//Son1是子组件（函数组件）
//Son2是子组件（类组件）

function Son1 (props) {
  return (
    <div>
      <h2>{props.msg}</h2>
      我是函数组件
    </div>
  )
}

class Son2 extends React.Component {
  state = {
    son2Msg: this.props.msg
  }
  render () {
    return (
      <>
        <h1>{this.state.son2Msg}</h1>
        我是类组件
      </>
    )
  }
}

class App extends React.Component {
  state = {
    msg: "this is app msg"
  }
  render () {
    return (
      <div className="App">
        <Son1 msg={this.state.msg} />
        <Son2 msg={this.state.msg} />
      </div>
    )
  }
}

export default App

props说明

和vue一样，props是只读，不能做修改

props可以传递任意数据，数字，字符串，布尔值，数组，对象，函数，JSX

function Son1 (props) {
  return (
    <div>
      <h2>{props.msg}</h2>
      <h2>{props.list.map(item => <p key={item}>{item}</p>)}</h2>
      <h3>{props.userInfo.name}</h3>
      <button onClick={props.cb}>触发父组件传入的函数</button>
      {props.jsxd}
      我是函数组件
    </div>
  )
}

class App extends React.Component {
  state = {
    msg: "this is app msg",
    list: [1, 2, 3],
    userInfo: {
      name: 'seek',
      age: 18
    }
  }
  render () {
    return (
      <div className="App">
        <Son1
          msg={this.state.msg}
          list={this.state.list}
          userInfo={this.state.userInfo}
          cb={() => { console.log(123) }}
          jsxd={(<div><h1>asdfs</h1></div>)}
        />

      </div>
    )
  }
}

export default App

父传子传递函数是子传父的实现

父传子jsx类似于vue的插槽

props赋值方法

function Son1 (props) {
  const { msg, list, userInfo, db, jsxd } = props
}

function Son1 ({ msg, list, userInfo, db, jsxd }) {

}
这里写的都是原生的js函数，原生js支持的方法，react都是可以的

实际工程中会使用第二种

子传父

通过方式：父传给子一个函数，通过函数来实现子传父

import React, { createRef } from "react"

function Son1 (props) {
  const { getSonMsg } = props
  return (
    <div>
      我是函数组件
      <button onClick={() => getSonMsg(123)}>点击按钮传入父组件</button>
    </div>
  )
}

class App extends React.Component {
  state = {
    msg: "this is app msg",
    list: [1, 2, 3],
    userInfo: {
      name: 'seek',
      age: 18
    }
  }
  getSonMsg = (msg) => {
    this.setState({
      msg: msg
    })
  }
  render () {
    return (
      <div className="App">
        <h1>{this.state.msg}</h1>
        <Son1 getSonMsg={this.getSonMsg} />
      </div>
    )
  }
}

export default App

为了减少写在jsx上过多，可以将函数抽到外面

function Son12 (props) {
  const { getSonMsg } = props
  function clickHandler () {
    getSonMsg(123)
  }
  return (
    <div>
      我是函数组件
      <button onClick={clickHandler}>点击按钮传入父组件</button>
    </div>
  )
}

兄弟组件通信

在这里插入图片描述

借助共同的父组件，实现兄弟间通信

import React, { createRef } from "react"

// 目标：B组件的数据传入A
// 方案：
// 1，先把B中的数据通过子传父，传给APP
// 2，再把App接收到的Son中的数据，通过父传子，传给A、

function SonA (props) {
  return (
    <div>
      this is A
      <h2>{props.msg}</h2>
    </div>
  )
}

function SonB (props) {
  function clickHandler () {
    props.getSonMsg("我是b的msg")
  }
  return (
    <div>
      <h1>this is B</h1>
      <button onClick={clickHandler}>点击传递给组件A</button>
    </div>
  )
}

class App extends React.Component {
  state = {
    msg: "this is app msg",
  }
  getSonMsg = (msg) => {
    this.setState({
      msg: msg
    })
  }
  render () {
    return (
      <div className="App">
        <h1>APP：{this.state.msg}</h1>
        <SonA msg={this.state.msg} />
        <SonB getSonMsg={this.getSonMsg} />
      </div>
    )
  }
}

export default App

跨组件通信

了解Context机制解决

在这里插入图片描述

如上：通过APP传递给Comc，可以通过父传子，但是层数过多，很麻烦

vue中使用provide inject

react使用context

import React, { createContext, createRef } from "react"

// APP->A->B->C
// 目标：APP->C
// 1，导入createContext方法并且执行.获取provider，consumer
// 2，使用provider包裹
// 3，使用consumer包裹

const context = createContext()
const { Provider, Consumer } = context
function SonA () {
  return (
    <>
      <h3>this is SonA</h3>
      <SonB></SonB>
    </>
  )
}

function SonB () {
  return (
    <>
      <h3>this is SonB</h3>
      <SonC></SonC>
    </>
  )
}

function SonC () {
  return (
    <>
      <h3>this is SonC</h3>
      <Consumer>
        {value => <span>{value}</span>}
      </Consumer>
    </>
  )
}

class App extends React.Component {
  state = {
    msg: "this is app msg",
  }
  getSonMsg = (msg) => {
    this.setState({
      msg: msg
    })
  }
  render () {
    return (
      <Provider value={this.state.msg}>
        <div className="App">
          <SonA />
        </div>
      </Provider>
    )
  }
}

export default App

props属性

在组件内部写了，就会自动出现在children属性

children表示该组件的子节点，只要组件内部有节点，props就有该属性

children：

  • 普通文本
  • 普通标签元素
  • 函数
  • JSX

目的：高阶组件

<SonA>this is child</SonA>

如下：类似于vue的插槽

function SonA ({ children }) {
  return (
    <>
      <h3>this is SonA</h3>
      <span>{children}</span>
    </>
  )
}


class App extends React.Component {
  render () {
    return (
      <div className="App">
        <SonA><h2>this is span child</h2></SonA>
      </div>
    )
  }
}

传递函数

function SonA ({ children }) {
  children()
  return (
    <>
      <h3>this is SonA</h3>
    </>
  )
}


class App extends React.Component {
  render () {
    return (
      <div className="App">
        <SonA>{() => console.log(123)}</SonA>
      </div>
    )
  }
}

传递JSX

function SonA ({ children }) {
  return (
    <>
      <h3>this is SonA</h3>
      {children}
    </>
  )
}


class App extends React.Component {
  render () {
    return (
      <div className="App">
        <SonA>{<div><p>{'this is p'}</p></div>}</SonA>
      </div>
    )
  }
}

传递多个标签

function SonA ({ children }) {
  return (
    <>
      <h3>this is SonA</h3>
      {children.map(child => child)}
    </>
  )
}


class App extends React.Component {
  render () {
    return (
      <div className="App">
        <SonA>
          <div><p>{'this is p'}</p></div>
          <p>{'this is p'}</p>
        </SonA>
      </div>
    )
  }
}

props校验

安装属性校验包
npm install prop-types

导入prop-types包

使用组件名.propTypes={} 给组件添加校验规则

第一个会报错，因为不是数组

import React, { createContext, createRef } from "react"
// 里面有各种各样的内置校验规则
import PropTypes from 'prop-types'

const TestPropTypes = ({ list }) => {
  return (
    <>
      <div>this is test</div>
      {list.map(item => <h2 key={item}>{item}</h2>)}
    </>
  )
}

TestPropTypes.prototypes = {
  list: PropTypes.array
}


class App extends React.Component {
  state = {
    list: [1, 2, 3]
  }
  render () {
    return (
      <div className="App">
        <TestPropTypes list={2} />
        <TestPropTypes list={this.state.list} />
      </div>
    )
  }
}

export default App

四种常见结构

  1. 常见类型：array、bool、func、number、object、string

  2. React元素类型：element

  3. 必填项：isRequired

  4. 特定的结构对象：shape({})

    官方文档：

https://reactjs.org/docs/typechecking-with-proptypes.html

prop默认值

函数默认值

方法一：（调试工具能看到）

使用prop-types包，使用defaultProps定义默认值

如果父元素没有传，则使用默认值

TestPropTypes.defaultProps = {
  list: [2, 3, 4]
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3kSa0M8u-1664891769628)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20221004130305629.png)]

方法二：(调用工具看不到，但是数据是可用的)，推荐方案

const TestPropTypes = ({ list = [2, 3, 7] }) => {
  return (
    <>
      <div>this is test</div>
      {list.map(item => <h2 key={item}>{item}</h2>)}
    </>
  )
}

在这里插入图片描述

类组件默认值

方案一：使用prop-types插件来实现

class TestClass extends React.Component {
  render () {
    return (
      <>
        <div>this is class component</div>
        <h2>{this.props.number}</h2>
      </>
    )
  }
}

TestClass.defaultProps = {
  number: 10
}

方法二：使用static（推荐）

class TestClass extends React.Component {
  static defaultProps = {
    number: 20
  }
  render () {
    return (
      <>
        <div>this is class component</div>
        <h2>{this.props.number}</h2>
      </>
    )
  }
}

如果两个同时使用，prop-types定义为准

to-and-fro
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue05源码学习资料
05-27
Vue05源码学习资料主要针对的是Vue.js的源码解析，这对于深入理解Vue的工作原理、优化应用性能以及进行二次开发具有重要意义。以下是对Vue.js核心知识点的详细阐述： 1. **虚拟DOM**：Vue的核心特性之一是使用虚拟...
学习JavaEE的day05
02-28
在“学习JavaEE的day05”这个主题中，我们主要关注的是Java企业版（JavaEE）的相关学习内容。JavaEE是Java平台的一个版本，它为开发和部署分布式企业级应用程序提供了丰富的框架和API。在这个阶段的学习中，你可能会...
主流组件库学习
qq_45225759的博客
11-16 1150
分析的这些组件库都是基于几大前端的生态来实现的，在设计上都已经形成了自己的风格和规范，也有自己的沉淀。
React学习:05 React组件之间如何传递数据
J_Sky：编程爱好者,又菜又爱玩.
11-09 903
至此,React组件之间如何传递数据,聪明的你一定了解了大概了.react数据流是定义成从上到下传递的,也就是父组件定义要是用的数据和方法,传递给子组件展示渲染,子组件的控制事件,依然在父组件中,说白了就是数据都在父组件那里控制,变量和方法,只是借给子组件而已.使用react组件的时候我们经常会把一些常用的组件组合到一起,定义成一个新的组件,一般前端页面会有一个父组件,这个组件中定义了当前页面中所需的变量,如何把这些变量传递给子组件呢?的值,这样就可在页面的渲染中看到实际效果了.定义了一个按钮组件,
vue3组件库项目学习笔记（三）：测试你的组件
weixin_46463785的博客
01-17 937
在完成一个组件之后，我们可以看到，想要测试你的组件，需要将他引入你的项目中，然后将你的组件的内容一项一项进行测试，在属性和内容多了以后，这样做是十分没用效率的，所以我们可以选用 vite 环境自带的 vitest 进行自动化测试。
Vue 学习笔记05：Vue组件化编程
Fulling的博客
03-27 1201
Vue 学习笔记05：Vue组件化编程一、模块与组件概念 一、模块与组件概念 模块 理解：向外提供特定功能的 js 程序，一般就是一个 js 文件 作用：复用 js，简化 js 的编写，提高 js 运行效率 组件 理解：用来实现局部（特定）功能效果的代码集合（html、css、js、images…） 作用：复用编码，简化项目编码，提高运行效率 模块化 理解：当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用。 组件化 理解：当应用中的功能都是多组件的方式来编写的
尚硅谷vue3学习笔记
2302_77862232的博客
01-07 2177
setup`是`Vue3`中一个新的配置项，值是一个函数，它是 `Composition API` ，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在`setup`中。特点如下：- `setup`函数返回的对象中的内容，可直接在模板中使用。- `setup`中访问`this`是`undefined`。- `setup`函数会在`beforeCreate`之前调用，它是“领先”所有钩子执行的。姓名：{{ name }}
lab05_ssd3_
10-02
标题 "lab05_ssd3_" 暗示着这是一个关于 SSD3（可能是指固态存储技术的第三阶段或版本）的学习资源包，主要包含了不同类型的练习和答案，以及源代码。SSD3 可能是指固态硬盘（Solid State Drive）的某个特定课程或者...
05 angular4.x组件 声明属性 绑定数据 绑定属性 数据循环3- toDolist(下).zip
08-13
本课程“05 angular4.x组件 声明属性 绑定数据 绑定属性 数据循环3- toDolist(下)”深入探讨了如何在Angular组件中声明属性、绑定数据以及使用数据循环来呈现列表。下面我们将详细阐述这些关键概念。 1. **组件声明...
JavaScript 网页前端工程：Web Components 原生组件简介与实作 at 2021/05/29
08-31
JavaScript_網頁前端工程_Web_Components_原生組件簡介與實作_at_2021_05_29
AvaloniaUI的学习
最新发布
lishuangquan1987的博客
07-25 833
官方中文文档：https://docs.avaloniaui.net/zh-Hans/docs/welcome。
Python编程学习第一篇——Python零基础快速入门（六）（4）异常处理
urhero的专栏
07-25 312
我们已经了解了Python的基本数据类型、变量和基本的逻辑控制语句，基于这些基础知识可以编写一些小程序了，但是在写程序的时候我们会发现，有时候程序并不是按我们预期的方向执行，有的直接报错，有的没有报错，却并未得到我们预期的结果。在这个例子中，除数为0会引发ZeroDivisionError异常，我们将异常信息赋值给变量e，并输出"除数不能为0"和异常信息。在这个例子中，由于除数不为0，所以没有发生ZeroDivisionError异常，代码会执行else语句块，并输出结果2.0。
基于深度学习算法，支持再学习功能，不断提升系统精准度的智慧地产开源了。
weixin_63598920的博客
07-24 858
智慧地产视觉监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒，省去繁琐重复的适配流程，实现芯片、算法、应用的全流程组合，从而大大减少企业级应用约95%的开发成本。通过计算机视觉和人工智能技术 ，搭建智能钢丝绳检测系统、井筒检测分析系统、余煤检测分析系统，提高检测准确度 ，降低工人在线的劳动强度 ，有效提高检测标准、避免客制化生产下 ，人工有可能存在的工作疏漏。用户只需在界面上进行简单的操作，就可以实现全视频的接入及布控。
SAP PP学习笔记31 - 计划运行的步骤2 - Scheduling(日程计算)，BOM Explosion(BOM展开）
shi_ly的专栏
07-24 796
本章主要讲Scheduling(日程计算),其中包括 外部调达中的调度，生产订单中的调度，修改需求日期(其实就是在物料中增加安全时间和BOM中的提前期偏置量)。另外还讲了BOM展开的内容，详细讲了BOM选择的各种方法，除了按数量选BOM之外，还有其他比如 按日期，按生产版本等，而其中按日期又分为按订单开始日期，订单终了日期等，越趋复杂。
FastAPI（八十）实战开发《在线课程学习系统》接口开发-- 课程列表
mr~li的博客
07-25 315
源码见："
虚拟机学习
weixin_63374588的博客
07-25 264
虚拟机的优点：虚拟机使用教程：
前端学习1——自学习梳理
qq_63125992的博客
07-24 330
【代码】前端学习1——自学习梳理。
7-23学习笔记
L14173233的博客
07-23 676
/检查性异常 是Exception的直接子类创建对象的方法1 new2 克隆3 反序列化4 反射。
FastAPI（七十一）实战开发《在线课程学习系统》接口开发-- 查看留言
mr~li的博客
07-24 311
梳理后发现，之前在接口设计的时候，有些欠缺，查看留言，是查看单个的留言，查看留言后，对应的留言变成已读状态。那么我们这个都需要传递一个参数，这个参数应该是留言的id。之前FastAPI（七十）实战开发《在线课程学习系统》接口开发--留言功能开发分享了留言开发，这次我们分享查看留言。在之前设计返回状态码的时候，发现状态码有缺失，我们增加下缺失的。3.判断是否是当前用户的留言，或者接受的方是自己。梳理这里的逻辑，这个接口要依赖登录。5.如果已读且回复了，要带回复的内容。以上则是实现查看留言的接口逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值