如何正确地将 jsx 转换为 tsx

Question

如何正确地将退出的 jsx 文件从 npx gltfjsx 命令转换为 TypeScript 文件？无法更正错误。

import React, {useRef} from 'react'
import { useGLTF } from '@react-three/drei'

export default function Crown(state: any, { ...props }) {
    const group = useRef()
    // @ts-ignore
    const { nodes, materials } = useGLTF('/crown.glb') //TS2339: Property 'materials' does not exist on type 'GLTF'.
    return (
        <group
            // @ts-ignore
            ref={group} //TS2322: Type 'MutableRefObject<undefined>' is not assignable to type 'Ref<Group> | undefined'.   Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<Group>'.     Types of property 'current' are incompatible.       Type 'undefined' is not assignable to type 'Group | null'.
            {...props}
            dispose={null}
        >
            <mesh..../>
            <mesh..../>
            <mesh..../>
            <mesh..../>
        </group>
    )
}

useGLTF.preload('/crown.glb')

Answer 1

gltfjsx 模块有可用的类型标志，因此您不必手动进行。

每当我想将 .glb 转换为 .tsx 时，我只需执行 npx gltfjsx file.glb -t 或 npx gltfjsx file.glb --types

有时这会给 ref 一个错误，如果你不需要 ref 你可以删除它，如果你这样做我的解决方法已经定义了 ref 类型：

 <group
      ref={group as Ref<THREE.Group>}
      {...props}
      dispose={null}
    >
...
</group>

如何正确地将 jsx 转换为 tsx

How to correctly convert jsx to tsx

typescript

reactjs

gltf

react-three-fiber

react-three-drei