Javascript 什么'；处理共享助手函数的方法是什么？

我对反应有些陌生，我正试图找出最好的地方是把需要在我的应用程序中使用的各种功能放在哪里

例如，我有一个函数some code，它根据传递给它的文档扩展名返回一个

document\u type

键

我还有一个

romanize

函数，它接受一个数字并将其转换为罗马数字

我还有一组函数，它们围绕着进行API调用和解析响应进行分组

所有这些都需要在应用程序的不同位置访问。我的理解是“反应方式”是通过组件创建实现的可组合性，但我很难理解这些作为组件的意义，因为我认为组件必须返回JSX

“反应方式”是以对应用程序最有意义的方式构造这些文件。让我给你举几个例子，看看react应用程序会是什么样子来帮助你

React对于视图有一个声明性树结构，其他相关概念也倾向于使用这种声明性树结构形式

让我们看两个例子，一个范例与视图层次结构相关，另一个范例与视图层次结构无关

如果没有，我们可以考虑您的域模型。您可能需要在类似于您的商业模式的商店中构建本地状态。您的业务模型通常看起来与视图层次结构不同，因此我们将对此有一个单独的层次结构

但是，业务模型需要连接到视图层的地方呢。因为我们是以每个组件为基础指定数据的。即使它不是视图或样式，也不是组件的行为方式，但它仍然与react组件位于同一文件夹层次结构中，因为它符合相同的概念结构

现在，有一个关于公用事业的问题。有很多方法可以做到这一点

如果它们都很小并且特定于您的应用程序，但不是任何部分，那么您可以将它们放在utils下的根目录中

如果有很多UTIL，并且它们适合与任何现有层次结构分离的结构，那么创建一个新的层次结构

如果它们独立于您的应用程序，则上述任何一种方法都可能成为npm包

如果它们与应用程序的某些部分相关，您可以将它们放在层次结构的最高点，以便使用该实用程序的所有内容都位于该实用程序所在的目录下

---

例如，您可以创建一个

utils

文件，从那里导出您的助手，并在需要时导入它们：

// utils.js

export function romanize(str) {
  // ...
}

export function getDocumentType(doc) {
  // ...
}

// App.js

import { romanize } from './utils';

---

在某些情况下，您需要像这样的助手函数，在util或helpers文件夹中设置这些函数是一种很好的处理方法

然而，为了充分利用React，我建议您考虑是否有一种方法可以代替它来创建共享组件。对于诸如romanize函数之类的函数，可以制作一个React组件，用于格式化传递给它的数字并将其显示在范围内。这与react库使用的方法相同，例如，

react intl

库建议使用其

组件，而不是其

formatMessage

帮助函数

比如说,

const RomanNumeral = ({ number }) => {
    // romanize logic here
    return <span>{result}</span>
}

const罗马数字=（{number}）=>{
//在这里把逻辑罗马化
返回{result}
}

然后您可以这样使用它：

<RomanNumeral number={5} />

您可以创建一个例如

utils

文件，从那里导出您的助手，并在需要时导入它们<代码>从“/utils”导入{romanize}如果他们与特定组件没有本质上的联系，就不要做它。只需将它们隔离在

utils

文件中，并根据需要导入。