React-函数组件跟类组件的用法(React组件通信-父传子、React组件通信子传父、React兄弟组件通信) React组件通信 React中ref的使用

已于 2024-04-01 23:15:29 修改
阅读量181 收藏 3
点赞数 10
分类专栏： react类组件 react函数组件 react组件通信 文章标签： react.js javascript 前端
于 2024-04-01 23:12:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51445493/article/details/137250079
版权

React函数组件用法

组件封装调用

import { useState } from 'react'
/**引入子组件Son */
import Son from './components/son'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      {count}
      <br />
      {/* 调用子组件Son */}
      <Son />
    </>
  )
}

export default App

import { useCallback, useState } from "react"

const Son = ()=>{
    const [sonTitle] = useState('我是子组件')
    return<>
        {sonTitle}
    </>
}
export default Son

组件传值 父传子

使用属性的方式进行传参 子组件接受props

import { useState } from 'react'
/**引入子组件Son */
import Son from './components/son'
import './App.css'

function App() {
  const [count, setCount] = useState(0)
  const [fatherData,setFatherData] = useState('我是父组件的数据')
  return (
    <>
      {count}
      <br />
      {/* 调用子组件Son
      * @fatherData 给子组件传参
      */}
      <Son fatherData={fatherData}/>
    </>
  )
}

export default App


import { useCallback, useState } from "react"
/**
 * @fatherData
 * 使用解构的形式
 * 此处一定要设置默认值 不然报错概率大
 */
const Son = ({fatherData = ''})=>{
    const [sonTitle] = useState('我是子组件')
    return<>
        {sonTitle}
        {fatherData}
    </>
}
export default Son

组件传值子传父

将父组件的方法以参数的形式传入到子组件 子组件调用传参即可

import { useCallback, useState } from 'react'
/**引入子组件Son */
import Son from './components/son'
import './App.css'

function App() {
  const [count, setCount] = useState(0)
  const [fatherData,setFatherData] = useState('我是父组件的数据')
  const fatherFn = useCallback((SonProps:string):void=>{
    console.log(SonProps)
  })
  return (
    <>
      {count}
      <br />
      {/* 调用子组件Son
      * @fatherData 给子组件传参
      * @fatherFn 给子组件传参
      */}
      <Son fatherData={fatherData} fatherFn={fatherFn}/>
    </>
  )
}

export default App


import { useCallback, useState } from "react"
/**
 * @fatherData 
 * @fatherFn 父组件传递过来的方法用于给父组件传递参数
 * 使用解构的形式
 * 此处一定要设置默认值 不然报错概率大
 */
const Son = ({fatherData = '',fatherFn = ():void=>{}})=>{
    const [sonTitle] = useState('我是子组件')
    return<>
        {sonTitle}
        {fatherData}
        <button onClick={fatherFn.bind(null,'我是子组件传递过来的参数(bind)')}>
            点我给父组件传值 bind
        </button>
      {/* 推荐使用 */}
        <button onClick={()=>fatherFn('我是子组件传递过来的参数(箭头函数)')}>
            点我给父组件传值 箭头函数
        </button>
    </>
}
export default Son

父组件调用子组件的方法–ref

import { useCallback, useEffect, useRef, useState } from 'react'
/**引入子组件Son */
import Son from './components/son'
import './App.css'

function App() {
  const [count, setCount] = useState(0)
  const [fatherData,setFatherData] = useState('我是父组件的数据')
  const fatherFn = useCallback((SonProps:string):void=>{
    console.log(SonProps)
  })
  /**
   * @useRef 创建一个ref 给子组件绑定
   * @current 子组件暴露出来的都在current下
  */
  const refSon = useRef()
  const useSonFn = useCallback(()=>{
    console.log('子组件',refSon.current)
    // 调用子组件的方法
    refSon.current.sonFn()
  })
  useEffect(()=>{
    // 查看子组件
    console.log(refSon)
  },[])
  return (
    <>
      {count}
      <button onClick={useSonFn}> 调用子组件Son的方法</button>
      <br />
      {/* 调用子组件Son
      * @fatherData 给子组件传参
      */}
      <Son ref={refSon} fatherData={fatherData} fatherFn={fatherFn}/>
    </>
  )
}

export default App


import { forwardRef, useCallback, useImperativeHandle, useState } from "react"
/**
 * @fatherData 
 * @fatherFn 父组件传递过来的方法用于给父组件传递参数
 * 使用解构的形式
 * 此处一定要设置默认值 不然报错概率大
 */
const Son = ({fatherData = '',fatherFn = ():void=>{}},ref)=>{
    const [sonTitle] = useState('我是子组件')
    const sonFn = useCallback(()=>{
        console.log('父组件调用了我')
    })
    /**
     * @useImperativeHandle
     * 作用和vue3的defineExpose一样, 存储需要暴露给父组件让其获取的数据和函数
     */
      useImperativeHandle(ref,()=>({
        sonFn,
        sonTitle
      }));
    return<>
        {sonTitle}
        {fatherData}
        <button onClick={fatherFn.bind(null,'我是子组件传递过来的参数(bind)')}>
            点我给父组件传值 bind
        </button>
        <button onClick={()=>fatherFn('我是子组件传递过来的参数(箭头函数)')}>
            点我给父组件传值 箭头函数
        </button>
    </>
}
/**
 * @forwardRef
 * forwardRef作用: 封装组件, 直接将ref参数加在props后面(也可以不使用, 自己props定义一下ref需要传参, 父组件一样传ref就行)
 */
export default forwardRef(Son)

总结: 父组件用useRef() 子组件需要forwardRef 封装组件并且需要useImperativeHandle（ref,()=>({ })抛出

类式组件用法

组件封装

/**
 * @father组件 父组件
 */
import React, { ReactNode } from 'react'
/**引入子组件Son */
import Son from './components/son'
import './App.css'

export default class App extends React.Component{
  render(): ReactNode {
    return<>
      {/* 父组件 */}
      {/* 子组件 */}
      <Son />
    </>
  }
}

/**
 * @Son组件 子组件
 */
import React, { ReactNode } from "react"
export default class Son extends React.Component{

  render():ReactNode{
    return<>
      我是子组件
    </>
  }
}

组件传值 父传子

/**
 * @father组件 父组件
 */
import React, { ReactNode } from 'react'
/**引入子组件Son */
import Son from './components/son'
import './App.css'

export default class App extends React.Component{
  state={
    fatherData:'我是父组件传递过来的参数'
  }
  render(): ReactNode {
    return<>
      {/* 父组件 */}
      {/* 子组件 */}
      <Son fatherData={this.state.fatherData}/>
    </>
  }
}

/**
 * @Son组件 子组件
 */
import React from "react"
import PropTypes from 'prop-types'
export default class Son extends React.Component{
    static defaultProps: {
        fatherData: string //限制fatherData必传，且为字符串
    }
    render(){
        const {fatherData} = this.props
        return<>
            我是子组件
            {fatherData}
        </>
    }
}
Son.defaultProps = {
    fatherData:''  //限制fatherData必传，且为字符串
}
Son.propTypes = {
    //限制fatherData必传，且为字符串（PropTypes首字母必须大写）
    fatherData: PropTypes.string.isRequired  
  }

组件传值 子传父

/**
 * @father组件 父组件
 */
import React, { ReactNode } from 'react'
/**引入子组件Son */
import Son from './components/son'
import './App.css'

export default class App extends React.Component{
  state={
    fatherData:'我是父组件传递过来的参数'
  }
  
  fatherFn = (data:string='')=>{
       console.log('我是子组件传递过来的参数:',data) 
  }
  render(): ReactNode {
      return<>
      {/* 父组件 */}
      {/* 子组件 */}
      <Son fatherData={this.state.fatherData} fatherFn={this.fatherFn}/>
      </>
  }
}

/**
 * @Son组件 子组件
 */
import React from "react"
import PropTypes from 'prop-types'
export default class Son extends React.Component{
    static defaultProps: {
        fatherData: string, //限制fatherData必传，且为字符串
        // eslint-disable-next-line @typescript-eslint/ban-types
        fatherFn: Function
    }
    render(){
        const {fatherData,fatherFn} = this.props
        return<>
            我是子组件
            {fatherData}
            <button onClick={()=>fatherFn('子组件132')}>点我给父组件传参</button>
        </>
    }
}
Son.defaultProps = {
    fatherData:'',  //限制fatherData必传，且为字符串
    fatherFn:()=>{}
}
Son.propTypes = {
    //限制fatherData必传，且为字符串（PropTypes首字母必须大写）
    fatherData: PropTypes.string.isRequired, 
    fatherFn:PropTypes.func.isRequired
  }

父组件调用子组件的方法 --ref

/**
 * @father组件 父组件
 */
import React, { createRef, ReactNode } from 'react'
/**引入子组件Son */
import Son from './components/son'
import './App.css'

export default class App extends React.Component{
  state={
    fatherData:'我是父组件传递过来的参数'
  }
  public fatherFn = (data:string='')=>{
    console.log('我是子组件传递过来的参数:',data) 
  }
  public refSon = createRef(null)
  componentDidMount(): void {
      console.log(this.refSon.current)
      this.refSon.current.SonFn()
  }
  render(): ReactNode {
      return<>
      {/* 父组件 */}
      {/* 子组件 */}
      <Son ref={this.refSon} fatherData={this.state.fatherData} fatherFn={this.fatherFn}/>
      </>
  }
}

/**
 * @Son组件 子组件
 */
import React from "react"
import PropTypes from 'prop-types'
export default class Son extends React.Component{
    static defaultProps: {
        fatherData: string, //限制fatherData必传，且为字符串
        // eslint-disable-next-line @typescript-eslint/ban-types
        fatherFn: Function
    }
    public SonFn = ()=>{
        console.log('我是子组件的方法')
    }
    render(){
        const {fatherData,fatherFn} = this.props
        return<>
            我是子组件
            {fatherData}
            <button onClick={()=>fatherFn('子组件132')}>点我给父组件传参</button>
        </>
    }
}
Son.defaultProps = {
    fatherData:'',  //限制fatherData必传，且为字符串
    fatherFn:()=>{}
}
Son.propTypes = {
    //限制fatherData必传，且为字符串（PropTypes首字母必须大写）
    fatherData: PropTypes.string.isRequired, 
    fatherFn:PropTypes.func.isRequired
  }

兄弟组件传值–Context

// 创建并暴露Context对象
export const { Provider, Consumer } = React.createContext()


return (
      <div className='grandpa'>
        <h3>我是祖组件</h3>
        <h4>我的用户名是：{username}</h4>
        <h4>我的年龄是：{age}</h4>
        <button onClick={this.changeMessage}>点我更改信息</button>
        <Provider value={{ username, age }}>
          <Parent />
        </Provider>
      </div>
    )

// 导入Grandpa组件中暴露出来的Context对象的Consumer
import { Consumer } from './Grandpa'

return (
      <Consumer>
        {
          (value) => {
            return (<div className='son' >
              <h3>我是子组件</h3>
              <h4>我接收到的用户名是：{value.username}</h4>
              <h4>我接收到的年龄是：{value.age}</h4>
            </div >)
          }
        }
      </Consumer >

    )
Seven,小七
关注
  • 10
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-react面试题之组件之间的通信方式.zip
03-20
react面试题 react_react面试题之组件之间的通信方式
React中的组件通信——父传子、子传父、Context
zep
11-20 4008
0、认识组件间的通信 在开发过程中，我们会经常遇到需要组件之间相互进行通信： 比如App可能使用了多个Header，每个地方的Header展示的内容不同，那么我们就需要使用者传递给Header一些数据，让其进行展示； 又比如我们在Main中一次性请求了Banner数据和ProductList数据，那么就需要传递给他们来进行展示； 也可能是子组件中发生了事件，需要由父组件来完成某些操作，那就需要子组件向父组件传递事件； 总之，在一个React项目中，组件之间的通信是非常重要的环节； 父组件在展示子组件
React--》React组件间数据的通信与共享
ztK63LrD的博客
01-19 1944
是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。： 对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据，如果传入的数据格式不对，可能会导致组件内部报错。Context提供了两个组件：Provider组件(用来提供数据)，Consumer组件(用来消费数据)。利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。
React 父组件调用子组件的方法---ref以及forwardRef 与 useImperativeHandle 详解
m0_70605065的博客
03-22 1735
React 父组件调用子组件的方法---ref以及forwardRef 与 useImperativeHandle 详解
react--子组件更改父组件的值（状态）
imkaifan的博客
10-19 2623
父组件把（一个事件函数）props传给子组件，然后子组件通过交互，触发这个事件（将想要改变的值传回） 父组件： import React, { Component } from 'react' import FilterTitle from '../FilterTitle' import FilterPicker from '../FilterPicker' import FilterMore from '../FilterMore' import styles from './index.module.
react中类组件与函数式组件ref使用
Curry的博客
07-14 2157
在某些场景中，我们可能需要通过ref来实现某些功能，比如父组件调用子组件的方法。 父组件为类组件 import React, { createRef } from 'react'; import ClassChild from './ClassChild.jsx'; import FunChild from './FunChild.jsx'; export default class DemoLayout extends React.Component { constructor()
react 中函数组件与类组件 ref 的使用
m0_46486849的博客
08-14 1789
react 中类组件与函数组件 ref 的使用
React几种传递参数的方法
qq_44980680的博客
11-20 2739
React几种传递参数的方法
react-react面试题之对类组件和函数组件的理解.zip
03-20
react面试题 react_react面试题之对类组件和函数组件的理解
react（react18）组件通信的各种方式以及各种详细例子（含react-redux + redux-toolkit）
09-25
3. React（react18）中组件通信03——简单使用 Context 深层传递参数. 4. React（react18）中组件通信04——redux入门. 5. React（react18）中组件通信05——react-redux入门. 6. React（react18）中组件通信05——...
react 父组件与子组件之间的值传递的方法
08-29
本篇文章主要介绍了react 父组件与子组件之间的值传递的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React 子组件向父组件传值的方法
08-29
React 子组件向父组件传值的方法 React 中，子组件向父组件传值是一种常见的需求，例如在表单提交时，子组件需要将输入的数据传递给父组件，以便父组件可以对数据进行处理和展示。那么，如何实现 React 子组件向父...
react使用OpenLayers实现类似船某网在地图放大时展示具体船舶符号缩小时显示聚合小点效果
左直拳的马桶_日用桶
06-19 166
如图所示，地图缩小（即比例尺放大）时，显示聚合小绿点；
在 React 中使用 ArcGIS JavaScript SDK 构建地图应用
kongxx的专栏
06-17 339
修改App.css，在文件夹最后添加ArcGIS的css。
React@16.x（28）useMemo
qq_40147756的博客
06-13 361
useMemo
gradio快速入门 — Reactive Interfaces
专注于Python编程技术的分享与交流，致力于帮助开发者提升编程技能，解决实际问题，探索Python的无限可能。
06-20 86
Gradio自动刷新演示。
【React】使用Token做路由权限控制
最新发布
weixin_40874076的博客
06-20 102
在components/AuthRoute/index.js中。src/router/index.js中。
如何使用React的Context API来实现跨组件的状态共享？
weixin_44714345的博客
06-19 296
通过以上步骤，你可以在React应用中使用Context API来实现跨组件的状态共享。请注意，使用Context API时要小心避免过度使用和滥用，因为它可能导致组件之间的耦合度增加，影响代码的可维护性。在React中，Context API是一种用于跨组件共享状态的方法。
react 函数组件 子组件向父组件通信
11-25
React函数组件中，子组件向父组件通信可以通过以下两种方式实现： 1. 父组件通过props将方法传递给子组件，子组件调用该方法来向父组件传递信息。 引用中的例子中，子组件Child通过父组件传入的MakeMoney方法调用父组件方法，实现了子组件向父组件通信的功能。 2. 使用回调函数，将子组件中的信息传递给父组件。 引用中的例子中，函数子组件ChildByCallback2通过props接收父组件传递的myClick方法，并在点击按钮时调用该方法，将信息传递给父组件。 以下是一个使用回调函数实现子组件向父组件通信的例子： ```jsx import React from "react"; import { Button } from "antd"; export default function ChildByCallback({ onChildClick }) { const handleClick = () => { onChildClick("我是函数子组件"); }; return ( <Button type="primary" onClick={handleClick}> click me </Button> ); } ``` 在父组件中，可以通过以下方式调用子组件并传递回调函数： ```jsx import React from "react"; import ChildByCallback from "./ChildByCallback"; export default function Parent() { const handleChildClick = (msg) => { console.log(msg); }; return ( <div> <ChildByCallback onChildClick={handleChildClick} /> </div> ); } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值