reactjs React Three(react-three/drei)的文本组件的属性无效[TypeScript生成错误]

a6b3iqyw  于 2022-12-18  发布在  React
关注(0)|答案(1)|浏览(262)

问题

总结

我正在尝试使用React Three(沿着一些配套的XR库)创建一个VR Web应用程序。
我在生成时遇到TypeScript错误。似乎在构造文本组件时丢失了一些属性(从react-three/drei导入).我有和一些官方演示完全一样的代码,我甚至在那些playground editors中看到了同样的错误,但不知何故,它建立在操场编辑器反正。我正在使用Webpack在我的项目中,利用ts加载器 * 尝试 * 建立我的ts/tsx文件。

错误消息

它试图呈现的TypeScript错误太长,所以很难准确地判断发生了什么。我认为将我的代码(如下)与Text组件的source code(如下)沿着查看会更有帮助。以下是错误消息:
TS 2740:类型“{子级:字符串;位置:编号[];字体大小:编号;颜色:字符串;锚点X:“中心”;锚Y:“middle”; }"缺少类型“选取〈忽略〈扩展颜色〈覆盖〈任何、节点属性〈任何,任何〉〉〉、非函数键〈{ position?:任何;向上?:任何;规模?:任何;旋转?:任何;基质:任何;四元数?:任何;层?:任何;处置?:()=〉无效;}〉〉& { ...;}和事件处理程序& {...;},“颜色”|还有110个|“调试SDF”〉':名字,类型,身份证,材料,还有71个

代码段

下面是我的代码的一个相关片段:

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;

下面是我参考的官方演示应用程序:

屏幕截图

∮我试过∮

  • 我尝试查看文本组件的source code
  • 对children属性的类型声明性很强-严格地将其定义为React.ReactNode类型
zdwk9cvp

zdwk9cvp1#

这个解决方案的权宜之计是在错误上面的行使用{/* @ts-expect-error */}来允许构建。在@react-three/drei更新之前,我相信这是唯一的解决方案。
以下是@ts-expect-error的文档
或者,您可以忽略整个文件的所有TypeScript错误。这可以通过在文件顶部添加// @ts-nocheck注解来实现。

相关问题