React js createRef() 显示打字稿错误

Question

一些打字稿警告我用 typescript@3.5.2 react@16.8 mobx-react@6 mobx@5

子功能组件

import { observer as HooksObserver } from 'mobx-react-lite';
const TicketForm: React.FC<any> = (props, ref) => {
    useImperativeHandle(ref, () => ({
        returnDataToParentComp: () => {
            console.log('hello')
        }
    }));
return <div></div>
}
export default HooksObserver(TicketForm,{forwardRef:true})

父class组件

export default class ParentComp extends React.Component<{}, {}> {
    formRef: React.RefObject<typeof TicketForm>;
    constructor(props: any) {
        super(props);
        this.formRef = createRef<typeof TicketForm>();
    }
    buttonClick = () => {
        console.log(this.formRef.current!.returnDataToParentComp);
    };
    render() {
        return (
            <div>
                <TicketForm ref={this.formRef} />
                <button onClick={this.buttonClick}>click me </button>
            </div>
        );
    }
}

显示

error:returnDataToParentComp undefined “MemoExoticComponent<ForwardRefExoticComponent<TicketFormStatelessProps & RefAttributes<{}>>>”

我该怎么办？

Answer 1

useImperativeHandle needs to be used in conjunction with forwardRef

const TicketForm: React.FC<any> = React.forwardRef(
  (props, ref) => {
    useImperativeHandle(ref, () => ({
      returnDataToParentComp: () => {
        console.log('hello')
      }
    }));
    return <div></div>;
  }
);

Answer 2

useImperativeHandle 存在于组件范围内，因此，无法自动将生成的对象推断到外部范围。你必须定义一个单独描述它的接口并将它提供给链的某个地方。

一些灵感：

https://medium.com/@jrwebdev/react-hooks-in-typescript-88fce7001d0d#6a30

我真的建议你避免使用命令句柄。当您别无选择时，应将它们视为最后的手段。在你的情况下，似乎你可以通过一个简单的道具逃脱。

React js createRef() 显示打字稿错误

React js createRef() show typescript error

typescript

reactjs

mobx-react