父组件为React函数组件时如何通过props向子组件传递函数

存在两处代码错误导致功能无法实现：

• 父组件传递函数props时写法错误，当前addItemToCart={() => addItemToCart}的写法是返回了函数本身，并没有执行逻辑也没有承接子组件传递的参数
• 子组件onClick绑定逻辑错误，直接写props.addItemToCart('hello')会在组件渲染阶段就自动执行函数，不会等到点击触发

1. 父组件修正代码 #

import './App.css';
import Item from './components/Item';
import React, { useState } from 'react';

function App() {
  // 示例初始化数据，可根据实际业务替换
  const [items, setitems] = useState([
    {
      name: "测试商品",
      quantity: 2,
      description: "商品描述示例",
      thumbnail: "https://示例图片地址.jpg"
    }
  ])

  const addItemToCart = item => {
    console.log("收到子组件回传数据：", item);
  };

  return (
    <>
      <ul className='items'>
        {items.map(item => (
          <Item
            key={item.name} {/* 遍历列表必须加key属性避免React警告 */}
            name={item.name}
            quantity={item.quantity}
            description={item.description}
            thumbnail={item.thumbnail}
            {/* 直接传递函数引用即可承接子组件参数 */}
            addItemToCart={addItemToCart}
          ></Item>
        ))}
      </ul>
    </>
  );
}

export default App;

2. 子组件修正代码 #

import React from 'react';

export default function Item(props) {
  return (
    <>
      <li className='item'>
        <img src={props.thumbnail} className='item-thumbnail' alt={props.name} />
        <h3 className='item-name'>{props.name}</h3>
        <p className='item-description'>{props.description}</p>
        <label className='item-quantity'>
          {props.quantity > 1
            ? `${props.name} come in groups of ${props.quantity}`
            : ''}
        </label>
        {/* 用箭头函数包裹调用，点击时才执行，同时传入要回传的参数 */}
        <button onClick={() => props.addItemToCart('hello')}>add item</button>
      </li>
    </>
  );
}

可选优化场景：如果需要将父组件遍历到的当前商品完整信息直接回传，不需要子组件额外传参，可以将父组件的props传递改为 addItemToCart={() => addItemToCart(item)}，子组件的onClick直接写 onClick={props.addItemToCart} 即可。

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