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

这篇关于forwardRef - React父组件控制子组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---