React组件传参问题：ItemMenu无法向Sidebar传递props

核心问题点 #

1. 组件调用方式错误：HiddenMenu的按钮onClick里直接执行ItemMenu(i.title)，这不是React渲染组件的正确方式——只是执行了一个函数，不会触发组件渲染和props传递。
2. props解构错误：HiddenMenu的参数写成({ props })，但实际传入的是items属性，应该直接解构items。
3. 状态缺失：没有用状态管理需要传递给Sidebar的oneItem值，导致点击后无法更新Sidebar的内容。

修正后的代码 #

Menus.jsx #

import { useState } from 'react';
import Sidebar from './Sidebar';

export const HiddenMenu = ({ items }) => {
    const [selectedItem, setSelectedItem] = useState(null);
    
    const IconKeys = [<Globe absoluteStrokeWidth />, <Telescope absoluteStrokeWidth />, <PencilLine absoluteStrokeWidth />];

    return (
        <div className='w-screen bg-slate-100 h-48 flex md:hidden flex-col items-center justify-center font-bold text-lg'>
            {
                items.map( (i) => {
                    return (
                        <div className='py-2 flex w-3/5 justify-end items-center gap-2' key={i.id}>
                            {IconKeys[i.id]}
                            <button 
                                title={i.title} 
                                onClick={ () => setSelectedItem(i.title) }
                            > 
                                {i.title} 
                            </button>
                        </div>
                    )
                })
            }
            <Sidebar oneItem={selectedItem} />
        </div>
    )
}

Sidebar.jsx #

const Sidebar = ({ oneItem }) => {
  console.log(oneItem);
  return (
    <div className='row-span-2'>
      {oneItem ? `选中项：${oneItem}` : '未选择任何项'}
    </div>
  );
};

export default Sidebar;

关键修正说明 #

• 状态管理：用useState创建selectedItem状态，点击按钮时更新状态，React会自动重新渲染依赖该状态的Sidebar组件。
• 正确解构props：HiddenMenu直接解构{ items }，避免因错误解构导致数据无法获取。
• 正确渲染组件：将Sidebar直接放在HiddenMenu中，通过状态传递oneItem，替代无效的组件函数调用方式。
• 移除冗余组件：原ItemMenu组件属于冗余层，直接通过状态传递即可实现需求。

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