React组件通过Props传递带参数函数的实现方法

我原本有一个带参数点击事件的下拉菜单，代码如下：

<div className="dropdown-container">
  <button className="dropdown-button"> Sort </button>
  <div className="dropdown-content">
    <button className="sort-button" onClick={() => changeFilter(['sort=-Covered_distance'])}> Furthest </button>
    <button className="sort-button" onClick={() => changeFilter(['sort=+Covered_distance'])}> Shortest </button>
    <button className="sort-button" onClick={() => changeFilter(['sort=-Duration'])}> Longest </button>
    <button className="sort-button" onClick={() => changeFilter(['sort=+Duration'])}> Fastest </button>
  </div>
</div>

为了复用，我把它封装成了Dropdown组件，但现在传递的changeFilter只能调用无参版本，没法传入对应参数：

<div className="filters-container">
  <Dropdown changeFilter={() => changeFilter()} />
</div>

请问怎么实现带参数的函数调用？

方法1：直接传递原函数，在组件内部传参 #

父组件里直接把changeFilter函数本身传给Dropdown，不要包装成无参函数：

<div className="filters-container">
  <Dropdown changeFilter={changeFilter} />
</div>

然后在Dropdown组件内部的按钮点击事件里，直接调用传入的函数并带上参数：

const Dropdown = ({ changeFilter }) => {
  return (
    <div className="dropdown-container">
      <button className="dropdown-button"> Sort </button>
      <div className="dropdown-content">
        <button className="sort-button" onClick={() => changeFilter(['sort=-Covered_distance'])}> Furthest </button>
        <button className="sort-button" onClick={() => changeFilter(['sort=+Covered_distance'])}> Shortest </button>
        <button className="sort-button" onClick={() => changeFilter(['sort=-Duration'])}> Longest </button>
        <button className="sort-button" onClick={() => changeFilter(['sort=+Duration'])}> Fastest </button>
      </div>
    </div>
  );
};

方法2：将选项数据作为props传入，提升组件复用性 #

如果需要让Dropdown组件适配不同的下拉选项，可以把选项数据单独抽出来作为props传递，这样同一个组件可以生成不同的下拉菜单：

父组件中定义选项并传递：

// 定义排序选项
const sortOptions = [
  { label: 'Furthest', value: ['sort=-Covered_distance'] },
  { label: 'Shortest', value: ['sort=+Covered_distance'] },
  { label: 'Longest', value: ['sort=-Duration'] },
  { label: 'Fastest', value: ['sort=+Duration'] }
];

<div className="filters-container">
  <Dropdown 
    changeFilter={changeFilter} 
    options={sortOptions} 
    buttonText="Sort" 
  />
</div>

Dropdown组件动态渲染按钮：

const Dropdown = ({ changeFilter, options, buttonText }) => {
  return (
    <div className="dropdown-container">
      <button className="dropdown-button">{buttonText}</button>
      <div className="dropdown-content">
        {options.map((option, idx) => (
          <button 
            key={idx} 
            className="sort-button" 
            onClick={() => changeFilter(option.value)}
          >
            {option.label}
          </button>
        ))}
      </div>
    </div>
  );
};

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