ReactJS - 在 ReactJS 中创建一个 Util 函数以重用代码

Posted 2023-02-22

【中文标题】ReactJS - 在 ReactJS 中创建一个 Util 函数以重用代码

【英文标题】：ReactJS - Create an Util Function in ReactJS tor reuse the code

【发布时间】：2021-08-08 11:50:29

【问题描述】：

我是 ReactJS 框架的新手，我有这些代码行：

//rest of code omitted...

const dateToTime = date => date.toLocaleString('en-GB');
const dateString = `$order.data.created_atZ`;
const localDate = new Date(dateString);

代码的另一部分被插入到组件的那个部分。 代码运行良好。

//rest of code omitted...

return (
     <React.Fragment key=index>
        <td>dateToTime(localDate) || emptyMessage</td> //<-----code continuation  

//rest of code omitted...

我想做一个实用函数来导入各种组件，我该怎么做？

我想重用代码

【参考方案1】：

您在应用程序的某个地方创建了 utils.js。然后将其导入到您想要的文件中。

import utils from '../../utils/utils.js';

使用解构 ES6

const  dateToTime, dateToString, localDate  = utils;

然后你可以在你的文件中使用它

console.log(dateToTime);

【讨论】：

谢谢。我现在会测试它，我很快就会回来。

你能详细解释一下吗？ utils 的主体看起来如何？

相同的行代码，但最后你使用： const dataToExport = dateToTime, dateToString, localDate ;导出默认数据到导出；

我不知道我在函数中返回了哪些变量： const dateToTime = date => date.toLocaleString('en-GB');常量日期字符串 = $order.data.created_atZ; const localDate = new Date(dateString);

啊，你需要为那 3 行代码导入必要的数据。如果您的“订单”数据仅在当前 js 文件中可用，您需要制作并导入如下答案的函数，并将数据传递给变量，就像普通函数一样

【参考方案2】：

就像你在 JS 中导出任何其他东西一样。

// util.js
export function myFunc(params)
    // Do stuff



// yourComponent.js
import myFunc from 'path/to/util.js';

//rest of your code
// you can use myFunc(params) anywhere you need