React函数组件无需this关键字传递带参函数作为props的实现方法

问题核心解决方法 #

你现有代码存在3个可调整的点，修改后就能用纯函数式组件实现需求：

1. React自定义组件必须使用大驼峰命名，否则会被识别为原生DOM标签
2. 子组件中直接写onClick={handleSave(item, list)}会导致函数在组件渲染时直接执行，不是点击触发
3. 父组件中直接声明的list是普通JS变量，修改后不会触发React重渲染，需要用useState声明为响应式状态

修正后的完整代码 #

子组件

如果父组件已经提前把参数绑定到传递的handleSave上，直接引用函数即可：

// 组件名改为大驼峰符合React规范
export function ChildComponent (props) {
    const { handleSave } = props;
    return ( 
        <button className="palletSaveButton" onClick={handleSave}> Save </button>
    )
}

如果需要把参数的定义放在子组件侧，可修改为以下写法：

export function ChildComponent (props) {
    const { handleSave, item, list } = props;
    // 包一层箭头函数，实现点击时才调用传参
    return ( 
        <button className="palletSaveButton" onClick={() => handleSave(item, list)}> Save </button>
    )
}

父组件

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

const ParentComponent = () => {
    // 声明为响应式状态，修改后才会触发组件更新
    const [list, setList] = useState([{/* 原有列表数据 */}]);
    const item = {/* 你的item数据 */};
    
    function handleSaveClick(item, list) {
        // 不直接修改原数组，返回新数组触发状态更新
        setList([...list, item])
    }
    
    return (
        <ChildComponent 
            // 提前绑定参数，子组件直接调用即可
            handleSave={() => handleSaveClick(item, list)} 
            // 如果参数需要放在子组件侧传递，使用下面的写法即可
            // handleSave={handleSaveClick}
            // item={item}
            // list={list}
        />
    );
}

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