父级调用子级的方法，解决 observer 和 forwardRef 冲突报错

场景：

需要实现，在父级组件，触发子组件中的 handleSearch 方法

思路：

通过 useRef 实现，配合 forwardRef、useImperativeHandle

在开发过程中，因为项目中用到了 observer，导致和  forwardRef 冲突报错

 

方案：

通过 observer(comp, { forwardRef: true }) 实现

父组件

const journalRef = useRef(null);

const handleInstruct = useCallback(() => {
  if(journalRef?.current) journalRef.current.handleSearch();
}, [journalRef?.current]);

return (
  <Journal
    ref={journalRef}
  />
);

子组件

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 });

.