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

父类组件

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未定义“MemoExoticComponent<ForwardRefExoticComponent<TicketFormStatelessProps & RefAttributes<{}>>>”

我该怎么办？

Answer 1

useImperativeHandle需要与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（）显示打字稿错误

2 个答案: