ReactHook——组件之间的传值

已于 2022-03-27 23:13:09 修改
阅读量1.4k 收藏 7
点赞数 2
分类专栏： # RCHooks 文章标签： react.js javascript 前端
于 2022-03-27 23:12:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/harryhy/article/details/123098812
版权

父组件传递子组件

父组件传递子组件——数据

引入子组件

import Marqueecom from "./components/marquee";

使用子组件

      <Header></Header>
        <Marqueecom></Marqueecom>
      <Footer></Footer>

定义一个数据 进行传递

const marqueedata = [
  {
    text: 11111,
  },
  {
    text: 22222,
  },
];
//完整的使用
<Marqueecom data={marqueedata}></Marqueecom>

完整父组件的代码

import React, { useEffect, useState, useContext, createContext } from "react";
import Header from "../../components/header/index";
import Footer from "../../components/footer/index";
import Marqueecom from "./components/marquee";

const marqueedata = [
  {
    text: 11111,
  },
  {
    text: 22222,
  },
];
const Home = () => {
  const [marqueelist,setmarqueelist]:any = useState([])
  useEffect(()=>{
    setmarqueelist(marqueedata)
  },[])
  return (
    <>
      <Header></Header>
        <Marqueecom data={marqueedata}></Marqueecom>
      <Footer></Footer>
    </>
  );
};
export default Home;

子组件

在props中拿到该值 进行操作

const Marqueecom = (props: { data: any; }) => {
    const {data}= props
  return(
    <>
    <Marquee pauseOnHover={true} speed={60} loop={0} gradient={false}>
      {data.map((item:any) => (
        <span className="red">{item.text}</span>
      ))}
    </Marquee>
  </>
  )
};

父组件传递子组件方法——子组件调用父组件方法

父组件

  const [sisters,setsisters]=useState('村里一朵花')
  <Changefather sisters={sisters} setsisters={setsisters}></Changefather>

完整代码

import React, { useEffect, useState, useContext, createContext } from "react";
import Changefather from './components/changefather'
const Home = () => {
  const [sisters,setsisters]=useState('村里一朵花')
  return (
    <>
        <Changefather sisters={sisters} setsisters={setsisters}></Changefather>
    </>
  );
};
export default Home;

子组件

 const {sisters,setsisters} = props;
<button onClick={()=>setsisters('老太婆')}>时间的变迁</button>

完整代码

import React, { useEffect, useState, useContext, createContext } from "react";
interface sister{
    sisters:string,
    setsisters:any
}
const Changeyears = (props:sister)=>{
    const {sisters,setsisters} = props;
    return (
        <>
        <div>
            {sisters}
        </div>
        <button onClick={()=>setsisters('老太婆')}>时间的变迁</button>
        </>
    )
}
export default Changeyears

子组件传递给父组件

父组件获取子组件——数据

父组件代码

  const [childData,setChildData]:any = useState();//获取子组件的值
    const getchildfn  = useCallback((data:any)=>{
    setChildData(data)
  },[])
  																// ↓↓↓↓↓↓
    <Changefather sisters={sisters} setsisters={setsisters} handleChildData={getchildfn} ></Changefather>
  //渲染一下子组件传给父组件的值
          {
          <div>
            这是子组件的值{childData}
          </div>
        }

父组件完整代码

import { useCallback, useEffect, useState } from "react";
import Header from "../../components/header/index";
import Footer from "../../components/footer/index";
import Changefather from "./components/changefather";

const Home = () => {
  const [sisters, setsisters] = useState("村里一朵花");
  const [loding, setloding] = useState(false); //loding;
  const [childData,setChildData]:any = useState();//获取子组件的值
  const changeloding = () => {
    setloding(true);
    setTimeout(() => {
      setloding(false);
    }, 1000);
  };
  const getchildfn  = useCallback((data:any)=>{
    setChildData(data)
  },[])
  return (
    <div className="home">
      <div className="home_div">
        <Header headeractive={1}></Header>
        <Changefather sisters={sisters} setsisters={setsisters} handleChildData={getchildfn} ></Changefather>
        <div className="buttondiv">
          <span>这是一个小小的button</span>
          <div className="lodingdiv" style={loding ? {} : { display: "none" }}>
            <div className="loding"></div>
          </div>
        </div>
        <button
          onClick={() => {
            changeloding();
          }}
        >
          changeloding
        </button>
        {
          <div>
            这是子组件的值{childData}
          </div>
        }
        <input type="number" placeholder="555" />
      </div>
      <Footer></Footer>
    </div>
  );
};
export default Home;

子组件代码

  const { sisters, setsisters,handleChildData } = props;
  const [childtext , setchildtext ] = useState('')
  useEffect(()=>{
    handleChildData(childtext)
  },[childtext])
  //两个按钮进行改变
        <div onClick={()=>{
        setchildtext('今天给爸爸洗脚')
      }}>传给父组件值</div>
      <div onClick={()=>{
        setchildtext('今天不给爸爸洗脚')
      }}> 第二次传给父组件的值</div>

子组件完整代码

import{ useEffect, useState } from "react";
import Countdown from "react-countdown";
import dayjs from "dayjs";

interface sister {
  sisters: string;
  setsisters: any;
  handleChildData:any;
}
const Changeyears = (props: sister) => {
  const { sisters, setsisters,handleChildData } = props;
  const [Cdtime,setCdtime]=useState(dayjs(1649999957832).valueOf())
  const [childtext , setchildtext ] = useState('')
  useEffect(()=>{
    handleChildData(childtext)
  },[childtext])
  return (
    <>
      <Countdown date={Cdtime} 
       renderer={time => {
         const {days,hours,minutes,seconds} = time.formatted
         return (
           <div>
             还有{days}天{hours}时{minutes}分{seconds}秒
           </div>
         )
       }}
      />
      <div onClick={()=>{
        setchildtext('今天给爸爸洗脚')
      }}>传给父组件值</div>
      <div onClick={()=>{
        setchildtext('今天不给爸爸洗脚')
      }}> 第二次传给父组件的值</div>
      <div className="animate__flash">{sisters}</div>
      <button onClick={() => setsisters("老太婆")}>时间的变迁</button>
    </>
  );
};
export default Changeyears;

父组件调用子组件——方法

父组件

  const childMethodRef:any = useRef();
    const handleChildFun = () => {
    childMethodRef.current.fun2()
  };
        <div
        onClick={() => {
          handleChildFun();
        }}
      >
        我要
      </div>

子组件

  const { sisters, setsisters,handleChildData,cRef } = props;
  useImperativeHandle(cRef, () => ({
    childFun (info: any) {
    console.log(info)
    },
    fun2(){
    console.log('fun2')
    }
    }));

父组件完整代码

import { useCallback, useEffect, useState, useRef } from "react";
import Header from "../../components/header/index";
import Footer from "../../components/footer/index";
import Changefather from "./components/changefather";

const Home = () => {
  const [sisters, setsisters] = useState("村里一朵花");
  const [loding, setloding] = useState(false); //loding;
  const [childData, setChildData]: any = useState(); //获取子组件的值
  const childMethodRef:any = useRef();
  const changeloding = () => {
    setloding(true);
    setTimeout(() => {
      setloding(false);
    }, 1000);
  };
  const handleChildFun = () => {
    childMethodRef.current.fun2()
  };
  const getchildfn = useCallback((data: any) => {
    setChildData(data);
  }, []);
  return (
    <div className="home">
      <div className="home_div">
        <Header headeractive={1}></Header>
        <Changefather
          sisters={sisters}
          setsisters={setsisters}
          handleChildData={getchildfn}
          cRef={childMethodRef}
        ></Changefather>
        <div className="buttondiv">
          <span>这是一个小小的button</span>
          <div className="lodingdiv" style={loding ? {} : { display: "none" }}>
            <div className="loding"></div>
          </div>
        </div>
        <button
          onClick={() => {
            changeloding();
          }}
        >
          changeloding
        </button>
        {<div>这是子组件的值{childData}</div>}
        <input type="number" placeholder="555" />
      </div>
      <div
        onClick={() => {
          handleChildFun();
        }}
      >
        我要
      </div>
      <Footer></Footer>
    </div>
  );
};
export default Home;

子组件完整代码

import{ useEffect, useState ,useImperativeHandle,forwardRef} from "react";
import Countdown from "react-countdown";
import dayjs from "dayjs";

interface sister {
  sisters: string;
  setsisters: any;
  handleChildData:any;
  cRef:any
}
let Changeyears = (props: sister):any => {
  const { sisters, setsisters,handleChildData,cRef } = props;
  const [Cdtime,setCdtime]=useState(dayjs(1649999957832).valueOf())
  const [childtext , setchildtext ] = useState('')
  useImperativeHandle(cRef, () => ({
    childFun (info: any) {
    console.log(info)
    },
    fun2(){
    console.log('fun2')
    }
    }));
  useEffect(()=>{
    handleChildData(childtext)
  },[childtext])
  return (
    <>
      <Countdown date={Cdtime} 
       renderer={time => {
         const {days,hours,minutes,seconds} = time.formatted
         return (
           <div>
             还有{days}天{hours}时{minutes}分{seconds}秒
           </div>
         )
       }}
      />
      <div onClick={()=>{
        setchildtext('今天给爸爸洗脚')
      }}>传给父组件值</div>
      <div onClick={()=>{
        setchildtext('今天不给爸爸洗脚')
      }}> 第二次传给父组件的值</div>
      <div className="animate__flash">{sisters}</div>
      <button onClick={() => setsisters("老太婆")}>时间的变迁</button>
    </>
  );
};

Changeyears = forwardRef(Changeyears);

export default Changeyears;

在这里插入图片描述

【React基础三】组件传值、高阶组件、Hook
前端知识分享喵
12-17 514
组件传值、高阶组件、Hook
React hooks 组件传值 - 父子组件之间的传值
subsistent的博客
08-19 789
子组件：函数组件接收一个props是一个对象，父组件传的属性名就是props对象的key，属性的值就是对应的value。一句话概括：在props上定义一个方法，调用方法的时候传入参数，达到传值的效果。一句话概括，react hook 父子组件之间通过props进行传值。父组件：在子组件标签上定义一个属性，属性值为一个方法。父组件：在子组件标签上定义属性。
React Hook组件间传值的四种方式
winne雪
07-06 1万+
父组件传值给子组件（props） 父组件给后代组件传值（context） 父组件调用子组件的函数（useImperativeHandle & forwardRef） 子组件传值给父组件（回调函数）
react hooks TS 组件传值 模板写法（基础版本）
最新发布
陈先生的博客
08-15 138
【代码】react hooks TS 组件传值 模板写法（基础版本）
react组件间通讯方式（组件传值）
weixin_48633811的博客
02-28 1913
组件间传值有多种方式，包括使用 props、Context API、回调函数、自定义 Hook、事件总线等。
react hooks父组件怎么调用子组件方法
wangweiscsdn的博客
03-01 2812
直接用????就可以说明，所以看看代码就能明白 父组件 import React, { useRef } from 'react'; const Parent = props => { const childMethodRef = useRef(); const handleChildFun = () => { childMethodRef.current.childFun('test'); } const fun2 = () => { childMethodRef.
React(一)——组件以及Props
我是我
10-09 1184
react组件/props
react——react Hooks、State Hook
m0_57712926的博客
11-14 1026
目录前言一、React Hooks 概述1. 产生的原因2. 总结二、State Hook的使用1. State Hook的概念2. 使用useState()实现状态管理步骤3. useState()初始化其它数据类型4. useState()注意点5. 类（class）组件和使用useState()创建的函数组件对比总结 前言 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 一、React Hooks 概述 Hoo
详解vue框架的生命周期函数以及组件间的传值
weixin_44465584的博客
03-20 1649
一.vue框架的生命周期函数 Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 1.什么是vue生命周期？有什么作用？ 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM ...
React-hooks面试考察知识点汇总
beifeng11996的博客
10-06 1502
在组件之间复用状态逻辑很难React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。有一些解决此类问题的方案，比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。复杂组件变得难以理解组件常常在和中获取数据。但是，同一个中可能也包含很多其它的逻辑，如设置事件监听，而之后需在中清除。相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。
Hook必知必会
yuan_me_da的博客
03-16 831
文章目录目录Hook解决了什么？Hook的基本使用useState 和 useEffectHook的使用规则自定义Hook 目录 Hook解决了什么？ React没有提供将可复用性行为“附加”到组件的途径。（例如，把组件连接到 store） 问题：组件之间复用状态逻辑很难 在hook出现之前，组件复用一般采用Render Props 和 高阶组件HOC，这类方案需要重新组织你的组件结构，让代码...
react 组件传值的三种方法
10-16
主要介绍了react 组件传值的三种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
React 子组件向父组件传值的方法
12-29
本文介绍了React 子组件向父组件传值的方法，分享给大家 子组件需要控制自己的 state， 然后告诉父组件自己的state，通过props调用父组件中用来控制state的函数，在父组件中展示子组件的state变化。 /***实现在输入框输入邮箱时，在div中即时显示输入内容***/ <body> <div id=test></div> </body> //子组件 var Child = React.createClass({ render: function(){ return ( <div> 邮箱：<input onChange={th
react hooks组件间的传值方式(使用ts)
热门推荐
qq_34775038的博客
05-19 2万+
父传子 通过props传值，使用useState来控制state的状态值 父组件 Father.tsx里： 子组件 Child.tsx里： 展示效果： 子传父 跟react的方式一样，像子组件传入回调函数，通过接收子组件的返回值，再去更新父组件的state 父组件，Father.tsx里： 子组件，Child.tsx里： 展示效果： 子传父优化版，使用useCallback存放处理事件的函数 父组件，Father.tsx里： 子组件，Child.tsx里： 跨级组件(父传后代) 使用useC
React Hook组件间传值 与 React类式组件传值【兄弟组件+父子组件】
hannah2233的博客
01-04 2282
父组件传值给子组件（props）， 爷爷给孙子组间传值(context)，子组间传值给父组件(父组件props传递回调函数)
React hooks组件通信
李白
08-02 401
组件通信是React中的一个重要的知识点，下面列举一下reacthooks中常用的父子、跨组件通信的方法。
React组件传值（用函数组件举例，涉及多种hook）
tryout123456的博客
11-07 2173
总结一下React中组件传值。组件分为函数组件和类组件。组件传值分为父子传值和兄弟传值。 一、父子传值 父组件传值给子组件是较为常见的组件传值方式。 function Father(){ return( <div className="c-father" > <Son text="theme" /> </div> ) } function Son(props){ return(
React 基础：在组件之间传递数据(1)
2401_84447233的博客
04-29 309
对于这个概念，我们需要使用useState钩子。直到现在你还没有看到那个钩子。有时间我再详细写。我们今天的结果将如下所示：在 React 中将数据从父组件发送到子组件React 中最轻松的数据流是自上而下地将数据从父组件传递到子组件。让我们以当前的示例为起点。在这个 repo 中，我们构建了一个简单的书架，上面放着几本书。在最后一个例子中，我们循环了我们的书，但我们想将这些书作为一个对象传递。我们可以通过像这样设置参数将它们传递到我们的书架：
react hook给父组件传值form
05-17
在React中，可以通过向子组件传递props的方式，将父组件中的表单数据传递给子组件。 首先，在父组件中创建一个表单，然后将表单数据存储在父组件状态中。接下来，将状态作为props传递给子组件。子组件使用这些props...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值