三个反应纤维 OrbitControls ref 对象在构建阶段在打字稿中抛出错误（代码确实有效）

Question

我目前遇到了关于 ref 对象类型的打字稿错误（据我所知）。我对打字稿很陌生，所以我不知道如何解决这个问题！

我已经附加了 tootip 打字稿给我，以及它在构建阶段抛出的错误。此外，我使用 react-three-drei 和 react-three-fiber 库来合成 three.js object

这是抛出的错误：

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

您将 cameraRef 的类型声明为 OrbitControls (OrbitControlsProps) 的道具类型，而不是 OrbitControls 本身。使用：

type OrbitControlsType = typeof OrbitControls

const cameraRef = useRef<OrbitControlsType>()

Answer 2

将类型从 useRef<OrbitControls> 更改为 useRef<any> 确实有效，但这不是最佳做法

Answer 3

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

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

const ref = useRef<OrbitControlsImpl>(null)

<OrbitControls ref={ref} />

对我有用。

三个反应纤维 OrbitControls ref 对象在构建阶段在打字稿中抛出错误（代码确实有效）

Three react fiber OrbitControls ref object throws error in typescript at build phase (code does work)

javascript

typescript

reactjs

use-ref

react-three-drei