React组件传参方法及Leva控制Cube缩放时模型消失问题排查

AI 小北

2026-6-26

问题：React组件传递Props后Cube消失且无报错

核心错误分析

你的Cube组件接收Props的方式不正确，导致传递的scale值被错误解析，最终使Three.js网格缩放异常。

React函数组件的第一个参数是包含所有传入属性的Props对象，而非单个属性。你之前的写法function Cube(scale)中，scale实际是整个Props对象，而非你传递的数值。将这个对象传给<mesh>的scale属性时，Three.js无法识别非数值/向量类型的输入，导致网格缩放被设置为无效值（等效于缩放至0），所以Cube看起来消失了，且无明确报错。

修复方案

修改Cube组件的Props接收方式，以下两种写法任选其一：

方式1：解构Props对象

直接从Props对象中提取scale属性：

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

方式2：直接使用Props对象

通过Props对象访问scale属性：

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