React中能否创建仅含非组件函数的文件并在App.js中导入使用？

完全没问题，这种把非组件的工具函数单独抽离到文件中的做法，是React项目里模块化代码的常用技巧，能让你的代码结构更清晰、职责更单一，后期维护也更方便。下面一步步教你实现：

步骤1：创建纯函数文件 #

首先，新建一个专门存放工具函数的文件（比如叫utils.js，你也可以根据功能命名，比如timeUtils.js），在里面定义并导出你的函数：

方式一：命名导出（适合一个文件有多个函数的情况） #

// utils.js
// 定义获取当前时间的函数
export const getCurrentTime = () => {
  const now = new Date();
  // 返回格式化后的时间字符串
  return now.toLocaleTimeString();
};

// 你还可以在这个文件里加其他工具函数
export const formatDate = (date) => {
  return date.toLocaleDateString();
};

方式二：默认导出（适合一个文件主要只有一个核心函数的情况） #

// utils.js
const getCurrentTime = () => {
  const now = new Date();
  return now.toLocaleTimeString();
};

// 默认导出这个函数
export default getCurrentTime;

步骤2：在App.js中导入并使用函数 #

根据你选择的导出方式，用对应的导入语法把函数引入到App.js里，然后直接在组件中调用即可：

如果是命名导出： #

import React from "react";
import { render } from "react-dom";
import Applic from "./ColorAdder/Applic";
// 用解构语法导入命名导出的函数
import { getCurrentTime } from './utils';

const styles = { fontFamily: "sans-serif", textAlign: "center" };

const App = () => (
  <div style={styles}>
    {/* 直接调用函数渲染结果 */}
    <p>当前时间：{getCurrentTime()}</p>
    <p>Here I want to use my function and show results</p>
  </div>
);

render(<App />, document.getElementById("root"));

如果是默认导出： #

import React from "react";
import { render } from "react-dom";
import Applic from "./ColorAdder/Applic";
// 直接导入默认导出的函数（名字可以自定义，不过建议和原函数名一致）
import getCurrentTime from './utils';

const styles = { fontFamily: "sans-serif", textAlign: "center" };

const App = () => (
  <div style={styles}>
    <p>当前时间：{getCurrentTime()}</p>
    <p>Here I want to use my function and show results</p>
  </div>
);

render(<App />, document.getElementById("root"));

额外说明 #

这种纯函数（非React组件）可以是任何类型的工具逻辑：比如数据格式化、数值计算、字符串处理等等，完全和UI组件解耦，让你的代码分工更明确。只要保证文件路径正确（比如./utils表示和App.js同级的utils.js文件），就能顺利导入使用。

内容的提问来源于stack exchange，提问作者Roberto