React父子组件传参语法问题：同时接收props与回调函数的正确写法

你的核心问题是对React函数组件的props接收方式理解有误：函数组件仅接收一个props参数，所有父组件传递的属性（包括数据、回调函数）都包含在这个对象里，不能拆成第二个参数。

错误写法分析 #

你原代码里的子组件定义export const Child= (props, {Function}) => {存在两个关键错误：

• 第二个参数{Function}完全不符合React组件的参数规范
• 父组件传递的回调函数是SidebarMenuClick，你用Function去接收完全不匹配

正确写法两种方式 #

方式1：直接使用props对象

通过props.xxx直接访问所有传入的属性，包括data和回调函数SidebarMenuClick：

import { useState } from 'react';

export const Child = (props) => {
  let toggleClassCheck = props.data ? ' active' : '';
  const [iconBtnState, setIconBtnState] = useState(false);
  
  const SidebarIconClick = () => {
    setIconBtnState(btnState => !btnState);
    // 调用父组件传递的回调函数
    props.SidebarMenuClick();
  }
  
  const [activeMenu, setActiveMenu] = useState('main');
  
  function DropdownItem(itemProps) {
    return (
      <a href="###" className="menu-item" onClick={() => itemProps.goToMenu && setActiveMenu(itemProps.goToMenu)}>
        <span onClick={SidebarIconClick} className="icon-button">{itemProps.leftIcon}</span>
        <div className='sidemenu_name'>{itemProps.children}</div>
      </a>
    );
  }

  return (
    <>
      {/* 示例渲染DropdownItem */}
      <DropdownItem leftIcon="🔍" goToMenu="search">搜索</DropdownItem>
    </>
  )
}

方式2：解构props（更简洁）

直接在参数里解构出需要的data和SidebarMenuClick，代码更清晰：

import { useState } from 'react';

export const Child = ({ data, SidebarMenuClick }) => {
  let toggleClassCheck = data ? ' active' : '';
  const [iconBtnState, setIconBtnState] = useState(false);
  
  const SidebarIconClickHandler = () => {
    setIconBtnState(btnState => !btnState);
    // 直接调用解构出来的回调函数
    SidebarMenuClick();
  }
  
  const [activeMenu, setActiveMenu] = useState('main');
  
  function DropdownItem({ goToMenu, leftIcon, children }) {
    return (
      <a href="###" className="menu-item" onClick={() => goToMenu && setActiveMenu(goToMenu)}>
        <span onClick={SidebarIconClickHandler} className="icon-button">{leftIcon}</span>
        <div className='sidemenu_name'>{children}</div>
      </a>
    );
  }

  return (
    <>
      <DropdownItem leftIcon="🔍" goToMenu="search">搜索</DropdownItem>
    </>
  )
}

额外修正点说明 #

1. 你原代码里SidebarIconClick(iconBtnState)的调用逻辑错误：SidebarIconClick是无参函数，不需要传参，应该在点击事件里直接调用该函数，再在函数内部触发父组件的回调
2. 内部组件DropdownItem的props建议和外部组件props重命名（或用解构），避免变量混淆
3. 必须导入useState，否则会触发运行时错误

父组件代码无需修改 #

你的父组件传递props的方式是正确的，保持原样即可：

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

function Parent() {
  const [navBtnState, setNavBtnState] = useState(false);
  const NavToggleBtnClick = () =>{
    setNavBtnState(btnState => !btnState);
  }
  const SideButtonClicked = () =>{
    console.log("clicked")
  }
  return (
    <div className='app'>
      <div onClick={NavToggleBtnClick}> Click here </div>
      <Child SidebarMenuClick={SideButtonClicked} data={navBtnState}/>
    </div>
  );
}
export default Parent;

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