自己的 utils 文件的 React 结构

Question

结构React应用有什么最佳实践吗？有时，我需要移动通用函数来分隔文件。但是哪里？ 这不是 node_module。

.git忽略
.git
package.json
node_modules
来源
- 组件
- 观看次数
- 减速机
- 操作
- utils ← 这是我的 utils 文件夹。
  1. DateUtils.js
  2. StringUtils.js
  3. NumberUtils.js

另一种方法是创建包含所有实用程序的基础反应组件。所有其他反应文件将是该组件的子文件。

class MyBaseComponent extends React.Component {

    dateUtilsMethod() {
       ...
    }

    stringUtilsMethod(myString) {
        ...
    }

}

class MainPageView extends MyBaseComponent { ... }

最好的解决方案是什么？

Answer 1

我认为你是在正确的轨道上，虽然它是有争议的。
我认为缺少的一件事是 utils 文件夹中的索引文件，该文件通过 export.
公开每个 util 文件例如：

//utils/index.js:  

 export { default as DateUtils} from './DateUtils';
 export { default as StringUtils} from './StringUtils';
 export { default as NumberUtils} from './NumberUtils';

您将从其他文件导入它们，如下所示：

import { DateUtils, NumberUtils} from '../utils ';

或全部导入为别名：

import * as utils from '../utils ';

自己的 utils 文件的 React 结构

React structure for own utils files

javascript

project-structure

reactjs