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

标签 javascript reactjs code-reuse

我有一段代码,我几乎在所有组件中都使用它,并且工作得很好,但我想让它可重用。

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

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()))
  }
}

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

最佳答案

解决方案非常简单:

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
}

关于javascript - 如何导出函数并使它们在 javascript/reactjs 中可重用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57704817/

相关文章:

javascript - 根据变量值动态添加类到表中

Javascript:在 Chrome 中删除了空白字符(但不是 Firefox)

javascript - 多次悬停序列后 JQuery setInterval 不起作用

javascript - 用 antd 响应动态表单值

javascript - 如何为多个 AngularJS 项目使用相同的代码库

open-source - 内部专有与开源

javascript - 如何将 1 个函数中给出的参数与 Javascript 中另一个函数的参数进行比较

reactjs - 使用 Storybook 导入 scss 文件

javascript - Facebook 登录在移动浏览器中不起作用

language-agnostic - 代码可重用性 : Is it worth it?