forwardRef 中React父组件控制子组件的实现代码
作者：宝子向前冲
forwardRef 用于拿到父组件传入的 ref 属性，这样在父组件便能通过 ref 控制子组件，这篇文章主要介绍了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()
}))
}到此这篇关于forwardRef - React父组件控制子组件的文章就介绍到这了,更多相关React父组件控制子组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！