- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我目前陷入了一个关于 ref 对象类型的 typescript 错误(据我所知)。我对 typescript 很陌生,所以我不知道如何解决这个问题!
我已经附加了 tootip typescript 给我,以及它在构建阶段抛出的错误。此外,我使用 react-three-drei 和 react-three-fiber 库来合成 three.js 对象
这是抛出的错误:
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 获得的工具提示:
最佳答案
根据 https://github.com/pmndrs/drei/issues/730 ,解决方案是:
import type { OrbitControls as OrbitControlsImpl } from 'three-stdlib'
const ref = useRef<OrbitControlsImpl>(null)
<OrbitControls ref={ref} />
它对我有用。
关于javascript - 三个 react 纤维 OrbitControls ref 对象在构建阶段在 typescript 中抛出错误(代码确实有效),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72011613/
是否可以创建 2 个永远相互调用的 Ruby 纤程? Ruby 最终会因堆栈溢出而崩溃,还是 Fibers 不会占用堆栈空间? 最佳答案 如果你用任何编程语言写一个无限循环,某些东西最终会崩溃。我不熟
我使用 ruby1.9.2p180(2011-02-18 修订版 30909)i686-linux。 Fiber#alive? 返回未定义的错误: fiber = Fiber.new{puts '
您好,我正在尝试使用光纤来等待请求,但它给出了错误 “错误:没有光纤就无法等待” 我应该做什么来处理这个问题。顺便说一下,我不使用meteor,只是纯粹的nodejs。 const Fiber = r
我试图理解以下代码片段的行为。我特别关注 Fiber#transfer方法。 require 'fiber' fiber2 = nil fiber1 = Fiber.new do puts "In
futures 如何处理具有多个参数的回调?这对我对 future 的几乎所有用途都至关重要。 github 示例显示它只处理一个参数。 例子来自 Github Readme是 var fileNam
在下面的代码中,光纤按预期工作(“1”和“2”相隔 2 秒打印)。但是,我想从 fiberFunction 返回“3”并同步打印。但这不起作用。这是输出: 1 Temp: undefined 2 有人
我一直在尝试弄清楚如何使用 node-fibers 使我的数据库代码在 node.js 中不那么困惑,但我无法让它工作。我将代码归结为最小测试用例: var Future = require('fib
所以我习惯这样设置助手: useHelper(sLightRef, THREE.SpotLightHelper); return 这将在 SpotLight 对象上创建一个助手。 我不明白的是如何在
前段时间我偶然发现了 node.js 并且非常喜欢它。但很快我发现它严重缺乏执行 CPU 密集型任务的能力。所以,我开始使用谷歌搜索并得到了这些解决问题的答案:Fibers、Webworkers 和
尝试部署新创建的 Meteor (0.9) 应用程序时,我总是在 Modulus 日志中收到此错误消息: module.js:340 throw err; ^ Error: Cannot
我目前陷入了一个关于 ref 对象类型的 typescript 错误(据我所知)。我对 typescript 很陌生,所以我不知道如何解决这个问题! 我已经附加了 tootip typescript
我正在阅读有关并发的内容。我对那些具有令人困惑的相似定义的术语感到有些困惑。即: 流程 话题 “绿色线程” 原型(prototype)线程 纤维 协程 Go 语言中的“Goroutines” 我的印象
我是一名优秀的程序员,十分优秀!