如何在javascript/JS中导出函数并使其可重用
我有一段代码,我几乎在我所有的组件中都使用它,并且工作得非常好,但是我想让它可以重用 我尝试将它导出到另一个文件中,然后导入并传递函数的参数,但没有成功 searchTerm只是一个输入,我将状态设置为输入的值如何在javascript/JS中导出函数并使其可重用,javascript,reactjs,code-reuse,Javascript,Reactjs,Code Reuse,我有一段代码,我几乎在我所有的组件中都使用它,并且工作得非常好,但是我想让它可以重用 我尝试将它导出到另一个文件中,然后导入并传递函数的参数,但没有成功 searchTerm只是一个输入,我将状态设置为输入的值 const data = [ { name: "User" email: "user@email.com" phone: 0000000 gender: "male" notes: "some notes" birthday: "00/
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
}
为什么不在根组件中创建函数并将其传递给使用该功能的所有子组件呢
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>);
}
}
类应用程序扩展了React.Component{
tableFilter(数据、搜索术语){
如果(data.length>0){
返回data.filter(d=>Object.values(d).join(“”)
.toLowerCase()
.match(searchTerm.toLowerCase())
}
}
render(){
返回(
...
);
}
}
您所说的“未工作”是什么意思?@EriksKlotins我的意思是我无法筛选数据,也看不到数据的完整列表。请发布示例输入数据,searchterm可能会有所帮助。您可以删除0检查,因为如果数据为空,筛选器将只返回空数组。