对象不能用作 JSX 组件

Question

我从 Typescript 收到错误消息，指出 GroundLoadTextures 不能用作 JSX 组件。我的目标是为 react-three-fiber-scene 设置一个 textureloadercomponent，这样我就可以在其他组件中使用加载的纹理。

'GroundLoadTextures' 不能用作 JSX 组件。它的 return 类型 '{ colorMap: Texture;位移图：纹理； normalMap：纹理； roughnessMap：纹理； aoMap：纹理； }' 不是有效的 JSX 元素。输入 '{ colorMap: Texture;位移图：纹理； normalMap：纹理； roughnessMap：纹理； aoMap：纹理； }' 类型 'Element' 中缺少以下属性：类型、道具、键

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

您正在 return 从您的 GroundLoadTextures 函数中获取一个对象文字，并且您正试图在 React 中呈现它。这不会起作用！

react 组件不能 return 除了数组或 jsx 元素之外的任何东西。

如果你想在其他地方使用这些值，比如 LoadTextures 你可以使用它的值（可能像解构它们）。

Answer 2

您不能 return 来自 React 组件的对象。你应该总是 return 来自 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();
  ....
}

对象不能用作 JSX 组件

Object cannot be used as JSX component

typescript

reactjs

react-three-fiber