React.createRef 打字稿中的当前类型

Question

我正在尝试查找 React.createRef 的输入内容。标头是一个自定义组件。 header.current总是说

（属性）React.RefObject.current：未知对象的类型为“未知”。

我可以将其设置为打字<any>，但这是最简单的方法。如何让 Typescript 发挥良好作用并停止抱怨。

Example: React.createRef<any>()

完整代码：

   const header = React.createRef();
    const { container } = render(
      <Header{...props} headerRef={header} />,
    );
    const el = header.current.getButtonElement("button");

我什至尝试将其设置为 HTMLDivElement 这就是它返回的内容。

const header = React.createRef<HTMLDivElement>();

但下面仍然给我一个错误： (property) React.RefObject.current: HTMLDivElement | null 对象可能为“null”。

const el = header.current.getButtonElement("button");

Answer 1

这是有道理的。TypeScript 试图警告您，对可能未定义的内容调用 getButtonElement 是“危险的”。您可以通过首先优化类型来解决此问题，如下所示：

const header = React.createRef<HTMLDivElement>();

// In test
const currentHeader = header.current;
if (!currentHeader) {
    // Handle the case where header isn't set yet
}

currentHeader.getButtonElement("button"); // At this point TypeScript knows currentHeader can't be null so the type check passes