如何在react中正确地跨组件传递props？

Question

我试图让 leva 调试器为我的多维数据集提供缩放属性，但是当我传递缩放属性时，多维数据集就消失了，没有错误。我已经通过聊天 GPT 运行了它，但没有运气，并且似乎无法找出它不起作用的原因，因为没有错误消息。

这是我的 Cube 组件：

export default function Cube(scale) {
    return <>
        <mesh receiveShadow  position-y={ - 1 } rotation-x={ - Math.PI * 0.5 } scale={ scale }>
            <boxGeometry />
            <meshStandardMaterial color="greenyellow" />
        </mesh>
    </>
}

这是我的体验部分：

import { OrbitControls } from '@react-three/drei'
import { Perf } from 'r3f-perf'
import Cube from './scene_elements/cube'
import GrassPlane from './scene_elements/GrassPlane'
import { useControls } from 'leva'

export default function Experience()
{

    const {scale} = useControls({
        scale: 1
    })
    console.log(scale);
    return <>

        <Perf position="top-left" />

        <OrbitControls makeDefault />

        <directionalLight castShadow position={ [ 1, 2, 3 ] } intensity={ 4.5 } />
        <ambientLight intensity={ 1.5 } />

        <Cube scale={scale}/>

        <GrassPlane/>

    </>
}

Answer 1

default function Cube(scale)

应该是

Cube(props)

，您将它们用作

props.scale

。

或者使用对象语法仅检索

scale

键：

Cube({ scale })