我有一个下拉菜单，其中包含下拉元素的按钮，按下它们会导致函数调用。

<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>

我试图清理我的代码，因为我有多个下拉菜单旁边彼此相同的原则。我想使一个React组件，有下拉菜单的结构，但因为我有一个函数调用，我需要通过这个也一样。

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

现在，它调用函数changeFilter（），但是其他组件的参数都不会被调用，所以当我按下任何按钮时，它基本上只调用changeFilter（）。