三个React Fiber OrbitControls REF对象在构建阶段的打字稿中引发错误（代码确实有效）

Question

目前，我遇到有关REF对象类型的打字稿错误（据我所知）。我是打字稿的新手，所以我不明白如何解决这个问题！

我附加了Tootip打字稿给我的，以及它在构建阶段遇到的错误。 使用反应三元和三个纤维库来合并三个

。

src/components/models/web/Plane.tsx:120:22 - error TS2322: Type 'MutableRefObject<OrbitControlsProps | undefined>' is not assignable to type 'Ref<OrbitControls> | undefined'.
  Type 'MutableRefObject<OrbitControlsProps | undefined>' is not assignable to type 'RefObject<OrbitControls>'.
    Types of property 'current' are incompatible.
      Type 'OrbitControlsProps | undefined' is not assignable to type 'OrbitControls | null'.
        Type 'undefined' is not assignable to type 'OrbitControls | null'.

120       <OrbitControls ref={cameraRef} />
                         ~~~

  node_modules/@types/react/index.d.ts:134:9
    134         ref?: Ref<T> | undefined;
                ~~~
    The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & OrbitControlsProps & RefAttributes<OrbitControls>'

此外，我

import {
  MeshDistortMaterial,
  MeshWobbleMaterial,
  OrbitControls,
  OrbitControlsProps,
  PerspectiveCamera,
  PointMaterial,
  Text,
} from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import React, { useContext, useRef } from "react";
import { ThemeContext } from "../../theme/theme";
export default function Box() {
  const cameraRef = useRef<OrbitControlsProps>();
  useFrame(() => {
    var angle = window.scrollY / window.innerHeight;
    cameraRef.current?.setPolarAngle(1.1 + angle / 10);
  });
  console.log(cameraRef);
  const theme = useContext(ThemeContext);
  return (
    <>
      <PerspectiveCamera
        makeDefault ...
      [truncated]
      />

      <OrbitControls ref={cameraRef} />
      <mesh position={[0, 0, 0]} rotation={[-1.5, 0, 0]}>
        <planeBufferGeometry args={[25, 10, 50, 50]} />
        <meshLambertMaterial
          attach="material"
          wireframe
          distort={0}
          color={theme.secondary}
        />
      </mesh>

      <fog
        attach="fog"
        color={theme.primary}
        near={1}
        far={3.5}
        position={[0, 0, 0]}
      />
      <mesh position={[0, 0, 0]}>
        <pointLight color={theme.cta} intensity={4} position={[0, 1, 0]} />
      </mesh>
    </>
  );
}

这是我从Intellisense获得的工具提示：

Answer 1

根据 https://github.com/pmndrs/drei/drei/issues/730
解决方案是：

import type { OrbitControls as OrbitControlsImpl } from 'three-stdlib'

const ref = useRef<OrbitControlsImpl>(null)

<OrbitControls ref={ref} />

它对我有用。

Answer 2

将类型从useref＆lt; orbitControls＆gt;更改为useref＆lt; any gt;确实有效，但这不是最好的练习

Answer 3

您将cameraref的类型声明为orbitControls的支柱类型（orbitcontrolsprops），而不是orbitcontrols本身。使用：

type OrbitControlsType = typeof OrbitControls

const cameraRef = useRef<OrbitControlsType>()