道具不传递道具

Question

我刚刚开始使用 React，我有这个 ItemMenu，假设将道具传递到侧边栏，但它不起作用。

我有 console.log 它，并且 ItemMenu 中的道具似乎工作得很好

菜单.jsx

import Sidebar from './Sidebar';

export const ItemMenu = (props) => {
    console.log(props);                         // This works just fine
    return <Sidebar oneItem={props} />;         // This one is not
};

export const HiddenMenu = ({ props }) => {
    
    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'>
            {
                props.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={ () => ItemMenu(i.title) } > {i.title} </button>
                        </div>
                    )
                })
            }
        </div>
    )
}

侧边栏.jsx

const Sidebar = ({ oneItem }) => {
  { console.log(oneItem) }           // I have this to console.log but it returns undefined
  return (
    <div className='row-span-2'>
      Side
      
    </div>
  );
};

export default Sidebar;

每次我单击

HiddenMenu

上的按钮时，它都不会返回任何内容。仅来自

ItemMenu

的 Console.log()。 Props 没有传递到侧边栏。

帮助并谢谢你

我尝试删除 console.log 并继续处理

OneItem

但它只是给出了未定义。

我想从该 props 中获取数据，以便我可以处理我在侧边栏上设置的 JSON 文件。

Answer 1

onClick={ () => ItemMenu(i.title) }

您无法以这种方式渲染组件。引起渲染的唯一方法是设置状态。然后 React 将调用您的组件，您的组件可以返回您想要放置在页面上的元素。

例如：

export const HiddenMenu = ({ props }) => {
  const [item, setItem] = useState(null);

  // ...
  return (
    <>
      {item && <ItemMenu oneItem={item} />}
      <div className="...">
        {/*...*/}
        <button title={i.title} onClick={() => setItem(i)}>
          {i.title}
        </button>
      </div>
    </>
  );
};