【问题标题】：Invalid properties for React Three (react-three/drei)'s Text component [TypeScript build error]React Three (react-three/drei)\'s Text 组件的无效属性 [TypeScript 构建错误]
【发布时间】：2022-12-16 07:41:52
【问题描述】：

问题

概括

我正在尝试使用 React Three（以及一些配套的 XR 库）创建一个 VR Web 应用程序。

我在构建时遇到了 TypeScript 错误。似乎我在构建文本组件（从react-three/drei 导入）时缺少一些属性。我有与一些官方演示完全相同的代码，我什至在那些playground editors 中看到了相同的错误，但不知何故它还是在 playground 编辑器中构建。我在我的项目中使用 Webpack，它利用 ts-loader 来尝试构建我的 ts/tsx 文件。

错误信息

它尝试呈现的 TypeScript 错误太长，因此很难准确判断发生了什么。我认为查看我的代码（下方）以及文本组件的 source code（下方）会更有帮助。这是错误消息：

TS2740: 类型 '{ children: string;位置：数字[]；字体大小：数字；颜色：字符串； anchorX: "中心"; anchorY: "中间"; }' 缺少类型 'Pick<Omit<ExtendedColors<Overwrite<any, NodeProps<any, any>>>, NonFunctionKeys<{ position?: any; 中的以下属性向上？：任何；尺度？：任何；旋转？：任何；矩阵？：任何；四元数？：任何；层数？：任何；处置？：（）=>无效； }>> & { ...; } & EventHandlers & { ...; }, “颜色” | ... 110 更多... | "debugSDF">': name, type, id, material, and 71 more.

代码片段

这是我的代码的相关 sn-p：
import React from 'react';
import { Text } from '@react-three/drei';
import '@react-three/fiber';

function Button() {
  return (
    <Text position={[0, 0, 0.06]} fontSize={0.05} color="#000" anchorX="center" anchorY="middle">
      Hello, Virtual World!
    </Text>
  )
}

export default Button;
以下是我引用的官方演示应用程序：

https://codesandbox.io/s/8i9ro?file=/src/index.tsx:0-1721

https://codesandbox.io/s/8w8hm?file=/src/App.tsx

截屏

我试过了

我试过查看文本组件的 source code

对 children 属性的类型非常明确 - 严格将其定义为 React.ReactNode 类型

【问题讨论】：

标签： reactjs typescript webpack react-three-fiber react-three-drei

【解决方案1】：

此解决方案的创可贴修复是在错误上方的行中使用 {/* @ts-expect-error */} 以允许构建。在 @react-three/drei 更新之前，我相信这是唯一的解决方案。

这是 @ts-expect-error 的 documentation

或者，您可以忽略整个文件的所有 TypeScript 错误。这可以通过在文件顶部添加 // @ts-nocheck 注释来完成。

【讨论】：