forwardRef - React父组件控制子组件

作用:forwardRef 用于拿到父组件传入的 ref 属性,这样在父组件便能通过 ref 控制子组件。

父组件:

javascript 复制代码
 import { useRef } from "react";
 import About from "./comment/About"; //引入子组件
 function App() {
   const typeRef = useRef(); 
 ​
   const bool = false;//定义一个参数
     
   const toggle = () => {
     console.log(typeRef)
   //调用 typeRef.current里面的数据
     typeRef.current.show();
     typeRef.current.close();
     console.log(typeRef.current.a);
   };
   // 回调函数
   const select = (item) => {
     console.log( item, "typeRef");
   };
   return (
     <>
       <About ref={typeRef} onSelect={select} parameter={bool}></About>
       <button onClick={toggle}>点击</button>
     </>
   );
 }
 ​
 export default App;
  • 父组件可以通过props向子组件传递参数,和方法。
  • 父组件通过 typeRef.current,调用在子组件中的方法和属性

子组件:

javascript 复制代码
import React, { forwardRef } from "react";
 ​
 /**
     forwardRef渲染函数只接受两个参数:props和ref,必须要传这两个参数
 */
 const About = forwardRef((props, ref) => {
   
  //向ref.current添加属性,在父组件中调用
   ref.current = {
     show: () => {
       console.log("show");
     },
     close: () => {
       console.log("close");
     },
      a:false,
   };
   const choseType = () => {
    console.log(props);
     //调用props里的方法和参数
     props.onSelect(1);
     console.log(props.parameter);
   };
   return <div onClick={choseType}>About</div>;
 });
 ​
 export default About;
 ​

子组件通过props接收父组件的方法和参数,进行调用

相关推荐
JustHappy12 分钟前
「我们一起做组件库🌻」做个面包屑🥖,Vue的依赖注入实战💉(VersakitUI开发实录)
前端·javascript·github
拉不动的猪28 分钟前
刷刷题16
前端·javascript·面试
kiramario30 分钟前
【结束】JS如何不通过input的onInputFileChange使用本地mp4文件并播放,nextjs下放入public文件的视频用video标签无法打开
开发语言·javascript·音视频
祈澈菇凉2 小时前
如何结合使用thread-loader和cache-loader以获得最佳效果?
前端
垣宇2 小时前
Vite 和 Webpack 的区别和选择
前端·webpack·node.js
java1234_小锋2 小时前
一周学会Flask3 Python Web开发-客户端状态信息Cookie以及加密
前端·python·flask·flask3
化作繁星2 小时前
如何在 React 中测试高阶组件?
前端·javascript·react.js
初遇你时动了情2 小时前
react module.scss 避免全局冲突类似vue中scoped
vue.js·react.js·scss
Au_ust2 小时前
千峰React:函数组件使用(2)
前端·javascript·react.js
爱吃南瓜的北瓜2 小时前
npm install 卡在“sill idealTree buildDeps“
前端·npm·node.js