class組件
父組件
import React, { Component } from "react";
import Child from './child'
export default class Parent extends Component {
componentDidMount(){
//被調(diào)用的子組件
this.child.test('參數(shù)')
}
onRef(ref){this.child = ref}
render() {
return (
<div>
<Child onRef={this.onRef} />
</div>
);
}
}
子組件
import React, { Component } from "react";
export default class Child extends Component {
componentDidMount(){
this.props.onRef(this)
}
//子組件被調(diào)用方法
test(val){
alert('我是測(cè)試方法'+val)
}
render() {
return (
<div>
我是子組件
</div>
);
}
}
react hook 父組件調(diào)用子組件方法
父組件
import {useRef} from 'react'
import ChildComp from './ChildComp'
export default function App() {
const childRef = useRef();
const updateChildState = () => {
// changeVal就是子組件暴露給父組件的方法
childRef.current.changeVal(99);
}
return (
<>
{/* 此處注意需要將childRef通過(guò)props屬性從父組件中傳給自己 cRef={childRef} */}
<ChildComp cRef={childRef} />
<button onClick={updateChildState}>觸發(fā)子組件方法</button>
</>
)
}
子組件
import { useState, useImperativeHandle } from 'react';
// props子組件中需要接受ref
export default function ChildComp({ cRef }) {
const [val, setVal] = useState();
function rules(a) {
console.log(a);
}
// 此處注意useImperativeHandle方法的的第一個(gè)參數(shù)是目標(biāo)元素的ref引用
useImperativeHandle(cRef, () => ({
// changeVal 就是暴露給父組件的方法
changeVal: (newVal) => {
rules(newVal);
}
}));
return (
<div>{val}</div>
)
}
