如何像React的onClick、onChange那样暴露参数？

数据老陈

2026-6-25

React自定义Props实现参数传递逻辑

核心思路

要实现类似onClick这类内置事件的参数传递逻辑，本质是让自定义组件接收一个回调函数作为someProp的属性值，在组件内部合适的时机调用这个回调，并传入你需要传递的参数。

具体实现示例

1. 定义接收回调的自定义组件

// CustomComponent.jsx
function CustomComponent({ someProp }) {
  // 模拟组件内部需要传递的参数（可以是状态、计算值等）
  const wannaDoThis = "自定义参数内容";

  // 在组件挂载时调用回调传递参数
  useEffect(() => {
    // 先判断是否为函数，避免非函数类型报错
    if (typeof someProp === 'function') {
      someProp(wannaDoThis);
    }
  }, [someProp]);

  return <div>自定义组件内容</div>;
}

2. 父组件中使用并传递回调

// ParentComponent.jsx
function ParentComponent() {
  return (
    <CustomComponent 
      someProp={(wanna_do_this) => console.log(wanna_do_this)}
    />
  );
}

扩展场景：用户交互触发参数传递

如果需要像onClick那样由用户操作触发参数传递，只需在组件的交互事件中调用回调：

function CustomComponent({ someProp }) {
  const handleUserAction = () => {
    const wannaDoThis = "用户操作触发的参数";
    someProp(wannaDoThis);
  };

  return <button onClick={handleUserAction}>点击传递参数</button>;
}