我是一个很新的反应，我不得不在大多数页面上使用一些Jquery代码行。 现在，我已经在ComponentDidMount()上编写了代码，我已经在每隔一页上编写了这段代码。 这意味着，如果我必须改变什么，我必须改变它在所有其他页面上。 什么方式更好地将这些代码放在一个页面上，并将这些代码导入到每一个需要的页面上？
这是jquery代码，
$(document).ready(function () {
var getOffset = "";
$('.table-responsive').on('scroll', function () {
getOffset = $('.table').position().top;
console.log(getOffset);
$('.radius-wrapper').css('top', getOffset + 48);
});
});
我以前没有使用过jquery，但是从代码可重用性的角度来看，我将重复的代码封装在一个函数中，如下所示:
export const myHelper = () => {
var getOffset = "";
$('.table-responsive').on('scroll', function () {
getOffset = $('.table').position().top;
console.log(getOffset);
$('.radius-wrapper').css('top', getOffset + 48);
});
}
然后，您可以将该函数导入到需要它的每个组件中，如下所示:
import { myHelper } from '/utils/helper'
然后，如果需要更改它，只需在util库中更改它，然后在任何导入它的地方都将有新代码
您可以在目录中的任何位置使用包含重复代码行的单独文件。
假设您在项目根目录中创建了一个名为functions.js的文件，如下所示:
function myFunction() {
//write any lines of code here for example a console.log
console.log("My function has been executed")
}
export { myFunction }
然后您必须将其导入到您需要的任何文件中
import React, { Component } from "react"
import { myFunction } from "/functions"
class ComponentName extends Component {
componentDidmount() {
//Execute the function you imported from the functions.js here
myFunction()
}
render() {
return <h1>Hello World !</h1>
}
}
运行前面的代码并在控制台中查看，您将发现
My function has been executed
从myFunction的执行中打印出来，您可以在其他组件中执行相同的操作，并且您将找到相同的结果，现在您必须在functions.js中更改一次代码，您将在所有组件中找到结果
