如何导出函数并使它们在 javascript / reactjs 中可重用答案

【问题标题】：How to export functions and make them reusable in javascript / reactjs如何导出函数并使它们在 javascript / reactjs 中可重用
【发布时间】：2020-01-02 09:56:15
【问题描述】：

我有一段代码，我几乎在所有组件中都使用它，并且运行良好，但我想让它可重用。

我尝试将它导出到另一个文件中，然后导入并传递函数的参数，但它不起作用。

searchTerm 只是一个输入，我将状态设置为输入的值。

const data = [
  {
    name: "User"
    email: "user@email.com"
    phone: 0000000
    gender: "male"
    notes: "some notes"
    birthday: "00/00/0000"
  }
]

我拥有并想要重复使用的东西：

let filteredData = []

if (clients.length > 0) {
  filteredData =
    data.filter(d=> Object.values(d).join(' 
    ').toLowerCase().match(searchTerm.toLowerCase()))
}

我尝试了什么：

export function tableFilter(data, searchTerm) {
  if (data.length > 0) {
    return data.filter(d => Object.values(d).join(' 
    ').toLowerCase().match(searchTerm.toLowerCase()))
  }
}

预期的结果是在我的所有组件中使用该函数而不重写它。我现在得到的根本不是数据。

【问题讨论】：

“没有工作”是什么意思？
@EriksKlotins 我的意思是我无法过滤数据，也看不到完整的数据列表。
请发布示例输入数据和搜索词
stackoverflow.com/questions/38402025/… 可能会有帮助
您可以去掉 0 检查，因为如果数据为空，过滤器只会返回一个空数组。

标签： javascript reactjs code-reuse

【解决方案1】：

解决方案非常简单：

export function tableFilter(data, searchTerm) {
  let filteredData = []
  // the if check is not necessary 
  if (data.length > 0) {
    filteredData = data.filter(d => Object.values(d).join(' 
    ').toLowerCase().match(searchTerm.toLowerCase()))
  }
  return filteredData
}

【讨论】：

【解决方案2】：

为什么不在根组件中创建函数并将其传递给所有使用该功能的子组件。

class App extends React.Component {
  tableFilter(data, searchTerm) {
      if (data.length > 0) {
         return data.filter(d => Object.values(d).join('')
                                            .toLowerCase()
                                            .match(searchTerm.toLowerCase()))
       }
  }
  render() {
    return (<div>
             <Child1 myfilter={this.tableFilter} />
             <Child2 myfilter={this.tableFilter} />
             <Child3 myfilter={this.tableFilter} />
             <Child4 myfilter={this.tableFilter} />
             ...
           </div>);
  }
}

【讨论】：