参数初始值设定项仅允许在函数或构造函数实现中使用。ts(2371)

Question

我是 typescript 的新手，我只将它用于 React Bricks。我正在尝试使用 threeJS 渲染 3d 对象，但出现上述错误。我试过将 colorMap 作为函数中的参数传递并在函数范围之外声明它，但它仍然给我一个错误。

import 'bootstrap/dist/css/bootstrap.css';
import React, { Component } from "react";
import { useLoader } from "react-three-fiber";
import { TextureLoader } from "three/src/Three";
import logo from "../react-bricks/bricks/images/logo.jpg"


const Box: React.FC = (colorMap) => (
  const colorMap=useLoader(TextureLoader,logo.src);
  
   
    
    <mesh rotation={[90,0,20]}>
        <boxBufferGeometry attach="geometry" args={[3,3,3]}/>
        <meshStandardMaterial map={colorMap}/>
    </mesh>
  )

export default Box;

Answer 1

你有一个陈述(const color = ___) 其中一个表达是必需的（() 内）。您使用的是箭头函数的简洁形式，您没有使用 { 作为 => 之后的第一个字符，因此整个函数体必须是一个表达式。

相反，请使用完整形式（{}）：

const Box: React.FC = (props) => { // <== {
    const colorMap = useLoader(TextureLoader, logo.src);

    return ( // <== return
        <mesh rotation={[90, 0, 20]}>
            <boxBufferGeometry attach="geometry" args={[3, 3, 3]} />
            <meshStandardMaterial map={colorMap} />
        </mesh>
    );
}; // <== }

请注意，我将参数列表中的 colorMap 更改为 props，因为您声明了一个名为 colorMap 的本地 const。请记住，函数组件接收一个对象作为它们的第一个参数值。该对象具有提供给组件的道具的属性。因此，例如，<Box x={1} /> 将收到一个具有 x 属性且值为 1 的对象。通常（但不总是！）人们使用解构从函数接收的对象中提取这些属性。

如果logo 是一个道具，例如，你可以这样做：

const Box: React.FC<ThePropsObjectType> = ({logo}) => {

...其中 ThePropsObjectType 是定义 Box 道具集的对象类型（带有 logo 道具）。