时间戳

首页 > 解决方案 > 对象不能用作 JSX 组件

reactjs - 对象不能用作 JSX 组件

问题描述

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

“GroundLoadTextures”不能用作 JSX 组件。它的返回类型 '{ colorMap: Texture; 置换贴图：纹理；法线贴图：纹理；粗糙度贴图：纹理；aoMap：纹理；}' 不是有效的 JSX 元素。类型'{颜色映射：纹理；置换贴图：纹理；法线贴图：纹理；粗糙度贴图：纹理；aoMap：纹理；}' 缺少类型“元素”的以下属性：类型、道具、键

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 />
    )
  }

标签： reactjstypescriptreact-three-fiber

解决方案

您不能从 React Component 返回 Object 。你应该总是从一个反应组件返回一个 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();
  ....
}

推荐阅读