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