场景：
需要实现，在父级组件，触发子组件中的 handleSearch 方法
思路：
通过 useRef 实现，配合 forwardRef、useImperativeHandle
在开发过程中，因为项目中用到了 observer，导致和 forwardRef 冲突报错
方案：
通过 observer(comp, { forwardRef: true }) 实现
父组件
javascript;gutter:true;
const journalRef = useRef(null);</p>
<p>const handleInstruct = useCallback(() => {
if(journalRef?.current) journalRef.current.handleSearch();
}, [journalRef?.current]);</p>
<p>return (</p>
<p>);</p>
<pre><code>
子组件
;gutter:true;
import React, { useImperativeHandle } from ‘react’;
import { observer } from ‘mobx-react-lite’;
const Journal = (props, ref) => {
const handleSearch = () => {
//
};
useImperativeHandle(ref, () => ({
handleSearch,
}));
};
export default observer(Journal, { forwardRef: true });
.
Original: https://www.cnblogs.com/crazycode2/p/16500409.html
Author: 每天都要进步一点点
Title: 父级调用子级的方法，解决 observer 和 forwardRef 冲突报错
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/547085/
转载文章受原作者版权保护。转载请注明原作者出处！