Hooks中父组件中调用子组件方法

/* child子组件 */
// https://reactjs.org/docs/hooks-reference.html#useimperativehandle
import {useState, useImperativeHandle} from 'react';
...
// props子组件中需要接受ref
const ChildComp = ({cRef}) => {
	const [val, setVal] = useState();
	// 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
	useImperativeHandle(cRef, () => ({
		// changeVal 就是暴露给父组件的方法
	    changeVal: (newVal) => {
	      setVal(newVal);
	    }
  	}));
  	...
  	return (
		<div>{val}</div>
	)
}

/* FComp 父组件 */
import {useRef} from 'react;
...
const FComp = () => {
	const childRef = useRef();
	const updateChildState = () => {
		// changeVal就是子组件暴露给父组件的方法
		childRef.current.changeVal(99);
	}
	...
	return (
		<>
			{/* 此处注意需要将childRef通过props属性从父组件中传给自己 cRef={childRef} */}
			<ChildComp ref={childRef} cRef={childRef} />
			<button onClick={updateChildState}>触发子组件方法</button>
		</>
	)
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
React Hooks ,父组件可以通过使用 `useRef` 来获取组件实例的引用,并调用组件方法。 首先,在组件,你需要使用 `useImperativeHandle` 将组件方法暴露给父组件。例如,假设组件的名字是 `ChildComponent`,组件有一个名为 `childMethod` 的方法: ```jsx import React, { forwardRef, useImperativeHandle } from 'react'; const ChildComponent = forwardRef((props, ref) => { useImperativeHandle(ref, () => ({ childMethod() { // 组件方法的逻辑 } })); // 组件的其他逻辑和 JSX return ( // 组件JSX ); }); export default ChildComponent; ``` 然后,在父组件,你可以使用 `useRef` 来获取组件的引用,并调用组件方法。以下是一个示例: ```jsx import React, { useRef } from 'react'; import ChildComponent from './ChildComponent'; const ParentComponent = () => { const childRef = useRef(null); const handleButtonClick = () => { childRef.current.childMethod(); // 调用组件方法 }; return ( <> <ChildComponent ref={childRef} /> <button onClick={handleButtonClick}>调用组件方法</button> </> ); }; export default ParentComponent; ``` 通过使用 `useRef` 创建一个引用 `childRef`,然后将其传递给组件的 `ref` 属性。在父组件,你可以使用 `childRef.current` 来访问组件实例,并调用方法。 这样,当点击父组件的按钮时,就会调用组件方法 `childMethod`。请注意,在父组件调用组件方法之前,确保组件已经渲染完成。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱技术的大仙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值