React：forwardRef 中 React 父组件控制子组件

分享一个React应用：forwardRef 中 React 父组件控制子组件。

forwardRef 中React父组件控制子组件

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

父组件：

 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，调用在子组件中的方法和属性

子组件：

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接收父组件的方法和参数，进行调用

关于React函数式组件父组件通过ref调用子组件的方法

使用useImperativeHandle+forwardRef，后者可以不使用

父子组件代码：

import {useRef} from 'react'
import Child from "./child"
//父组件
const Parent=()=>{
const cRef=useRef()
return(
const getChild=()=>{
cRef.current.getdata()//调用子组件的getdata方法
}
<Chile cRef={cRef} />//子组件
<BUtton onClick={getChild}/>
)
}
export default Parent
//子组件
import {useImperativeHandle} from 'React'
type Cprops={
cRef
}
const Child=({cRef})=>{
useImperativeHandle(cRef,()=>({
//这里写上子组件的方法
getdata()
}))
}