React项目中如何在Navbar组件调用状态更新函数以切换Canvas中的3D模型

我来帮你梳理下问题所在，然后给出可行的解决方案：

核心问题分析 #

1. 组件状态无法跨组件访问：你之前定义的CChange1/CChange2函数只存在于main.jsx中，作为子组件的Navbar没办法直接调用这些函数；
2. onClick事件绑定错误：你在DropdownItem里写了onClick={<CChange1 />}，这是把React元素传给了事件属性，但onClick需要的是一个函数引用，不是JSX元素。

解决方案：通过Props传递状态更新能力 #

我们可以把父组件的状态更新函数通过props传给Navbar，让子组件具备触发状态变更的能力，同时简化切换逻辑：

1. 修改main.jsx：传递状态更新函数给Navbar

把clothesModel（状态更新函数）作为props传给Navigation组件：

// main.jsx
import { useState } from 'react';
import { Canvas } from '@react-three/fiber';
import { Suspense } from 'react';
import Navigation from './Navbar';
import C1 from './C1';
import C2 from './C2';

export default function App() {
  const [clothesCurrent, clothesModel] = useState("cModel1");
  const cModels = { cModel1: <C1 />, cModel2: <C2 /> };

  return(
    <div>
      {/* 将状态更新函数通过props传递给Navigation */}
      <Navigation onClothesChange={clothesModel} />
      <h3>Change Clothes</h3>
      <Canvas>
        <Suspense>
          {cModels[clothesCurrent]}
        </Suspense>
      </Canvas>
    </div>
  )
}

2. 修改Navbar.jsx：接收Props并绑定切换逻辑

在Navbar组件中接收onClothesChange props，直接在DropdownItem的点击事件中调用这个函数并传入对应模型的key：

// Navbar.jsx
import { DropdownItem, BoltIcon } from 'your-ui-library'; // 替换为你实际使用的UI库

export default function Navigation({ onClothesChange }) {
  return (
    <nav>
      {/* 将更新函数继续传递给DropdownMenu */}
      <DropdownMenu onClothesChange={onClothesChange} />
    </nav>
  );
}

function DropdownMenu({ onClothesChange }) {
  return(
    <div>
      <DropdownItem 
        leftIcon={<BoltIcon />} 
        onClick={() => onClothesChange("cModel1")}
      >
        Clothes 1
      </DropdownItem>
      <DropdownItem 
        leftIcon={<BoltIcon />} 
        onClick={() => onClothesChange("cModel2")}
      >
        Clothes 2
      </DropdownItem>
    </div>
  )
}

// 保留你原有的Navbar、NavItem组件，按需调整props传递即可
function Navbar(props) { /* ... */ }
function NavItem(props) { /* ... */ }

额外优化建议 #

如果后续要添加更多模型，可以把模型配置抽成数组，避免重复代码：

// 可以放在main.jsx或单独的配置文件中
const clothesOptions = [
  { key: "cModel1", label: "Clothes 1" },
  { key: "cModel2", label: "Clothes 2" },
  // 新增模型只需在这里添加
];

然后在Navbar中通过循环渲染DropdownItem，后续扩展会更方便。

内容的提问来源于stack exchange，提问作者FiaDess