Question

我是React的新手，我试图找出最好的地方是放置需要在我的应用程序中使用的各种功能。

例如，我有一个函数，一些代码根据传递给它的文档扩展名返回一个document_type键。

我还有一个romanize函数，该函数接受一个数字并将其转换为罗马数字。

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

所有这些都需要在应用程序的各个位置进行访问。据我了解，“反应方式”是通过组件创建实现的可组合性，但是我很难看到它们作为组件的意义，因为我相信组件必须返回JSX。

Answer 1

您可以创建例如utils文件，从那里导出您的助手，并在需要时导入它们：

// utils.js

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

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

// App.js

import { romanize } from './utils';

Answer 2

在某些情况下，您将需要诸如此类的帮助程序功能，并在util或helpers文件夹中进行设置是解决该问题的好方法。

但是，为了充分利用React，我建议考虑是否有一种方法可以制作共享组件。对于romanize函数之类的函数，您可以制作一个React组件，以格式化传递给它的数字并将其显示在跨度中。这与React库使用的方法相同，例如react-intl库建议使用其<FormattedMessage />组件而不是其formatMessage辅助函数。

例如，

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

然后您可以像这样使用它：

<RomanNumeral number={5} />

Answer 3

“反应方式”是以对您的应用程序最有意义的方式来构造这些文件。让我为您提供一些示例，说明React应用程序倾向于为您提供帮助。

React具有用于视图的声明性树结构，其他相关概念也倾向于落入该声明性树结构形式。

让我们看两个示例，一个示例与视图层次结构相关，而另一个示例与视图层次结构不相关。

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

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

现在，您有关于实用程序的问题。有很多解决方法。

如果它们很小并且特定于您的应用程序，但没有任何部分，则可以将它们放在utils下的根目录中。
如果有很多utils，并且它们适合与您现有的任何层次结构分开的结构，请建立新的层次结构。
如果它们独立于您的应用程序，则以上两种方法都可能成为npm软件包。
如果它们与您的应用程序的某些部分相关，则可以将它们放在层次结构的最高点，以使使用该实用程序的所有内容都位于该实用程序所在的目录下。

处理共享助手功能的反应方式是什么？

3 个答案: