React中的哪里定义辅助函数？

Question

我一直在像下面这样的基本辅助函数的代码重复中绊脚石：

function percentageWithCommas(x?) {
    try {
        return (x * 100).toLocaleString("en-UK", { maximumFractionDigits: 1 }) + '%';
    } catch (e) {
        return (x * 100).toFixed(2) + '%';
    }
}

我在不同文件夹中的许多TSX文件中找到了此特定功能，例如在myView1/components/fileA.tsx，myView2/components/fileB.tsx，myView2/components/fileC.tsx中。

如何快速重构它，这样我只需要在one处维护和更改代码？我觉得我的前辈没有为此写一个组件是有原因的。

Answer 1

创建一个utils模块，在其中添加一个文件，将其塞入其中。然后根据需要导入模块或所需的功能。

src / utils / index.js

export function percentageWithCommas(x?) {
    try {
        return (x * 100).toLocaleString("en-UK", { maximumFractionDigits: 1 }) + '%';
    } catch (e) {
        return (x * 100).toFixed(2) + '%';
    }
}

src / components / ComponentA.tsx

import { percentageWithCommas } from '../utils';

export default ComponentA(props) {
    ...
    const formattedPercent = percentageWithCommas(0.05);    // '5%'
}