对象不能用作JSX组件

Question

我从Typescript中得到错误，GroundLoadTextures不能用作JSX组件。我的目标是为react三纤维场景设置一个纹理重载组件，这样我就可以在其他组件中使用加载的纹理。

"GroundLoadTextures"不能用作JSX组件。其返回类型"｛colorMap:Texture；displacementMap:Texture、normalMap:Texture和roughnessMap:Texture；aoMap:Texture！｝"不是有效的JSX元素。类型"｛colorMap:Texture；displacementMap:Texture；normalMap:Texture，roughnessMap:Texture；aoMap:Texture，｝"缺少类型"Element"中的以下属性：Type，props，key

import { useTexture } from "@react-three/drei";
function GroundLoadTextures() {
const [colorMap, displacementMap, normalMap, roughnessMap, aoMap] = useTexture([
'/textures/stoneFloor/color.jpg',
'/textures/stoneFloor/displacement.png',
'/textures/stoneFloor/normal.jpg',
'/textures/stoneFloor/roughness.jpg',
'/textures/stoneFloor/ao.jpg'
])
const groundTextures = {
colorMap: colorMap,
displacementMap: displacementMap,
normalMap: normalMap,
roughnessMap: roughnessMap,
aoMap: aoMap
}
return(
groundTextures
)
}
export default function LoadTextures() {
return(
<GroundLoadTextures />
)
}

Answer 1

您不能从React组件返回Object。您应该始终从react组件返回一个JSX元素。

在您的情况下，您需要的是一个自定义挂钩。

import { useTexture } from "@react-three/drei";
function useGroundLoadTextures() {
const [colorMap, displacementMap, normalMap, roughnessMap, aoMap] = useTexture([
'/textures/stoneFloor/color.jpg',
'/textures/stoneFloor/displacement.png',
'/textures/stoneFloor/normal.jpg',
'/textures/stoneFloor/roughness.jpg',
'/textures/stoneFloor/ao.jpg'
])
const groundTextures = {
colorMap: colorMap,
displacementMap: displacementMap,
normalMap: normalMap,
roughnessMap: roughnessMap,
aoMap: aoMap
}
return groundTextures;
}
export default usegroundLoadTextures; 

有了这个自定义挂钩，现在你可以在其他地方导入并使用它。

import useGroundLoadTextures from './..'
function SomeOtherComponent(){
const groundTextures = useGroundLoadTextures();
....
}

Answer 2

您正在从GroundLoadTextures函数返回一个对象文字，并试图在react中渲染它。这是行不通的！

react组件不能返回除数组或jsx元素之外的任何其他内容。

如果你想在其他地方使用这些值，比如LoadTextures，你可以使用它的值(可能像销毁它们一样(。