React组件调用外部非组件JS文件中函数的实现问题

我来帮你梳理下当前代码的问题，以及正确的实现步骤：

问题分析 #

你的代码目前有两个关键问题：

1. 外部的sysFunction.js没有正确导出函数，导致React组件无法获取到这个方法；
2. 组件的render方法写法不符合React要求，且调用函数的方式不对。

步骤1：修正外部工具函数的导出 #

首先，我们需要把sysFunction.js里的函数正确导出，有两种常用方式：

方式一：默认导出（适合单个函数的场景）

如果这个文件主要只提供这一个函数，用默认导出最方便：

// sysFunction.js
// 注意：这个函数没用到React API，所以不需要导入React！
function currYear() {
  return new Date().getFullYear();
}

// 导出这个函数作为默认模块
export default currYear;

方式二：命名导出（适合多个工具函数的场景）

如果以后要在这个文件里加更多系统函数，推荐用命名导出：

// sysFunction.js
// 直接在函数前加export
export function currYear() {
  return new Date().getFullYear();
}

// 可以添加更多函数，比如获取当前月份
export function currMonth() {
  return new Date().getMonth() + 1; // 月份是0开始，所以加1
}

步骤2：在React组件中导入并调用函数 #

根据你选择的导出方式，对应修改组件代码：

情况一：使用默认导出时

import React, { Component } from 'react';
import ReactDom from 'react-dom';
import Logo from "../../../assets/app/media/img/logos/logo-1.png";
// 默认导入，你可以自定义名字，比如叫getCurrentYear
import getCurrentYear from "../SysFunctions/SysFunction";

export default class Login extends Component {
  render() {
    // React组件的render必须返回有效的JSX，所以要把函数结果放在JSX标签里
    return (
      <div>
        {/* 调用导入的函数，用{}包裹嵌入到JSX中 */}
        版权所有 © {getCurrentYear()}
      </div>
    );
  }
}

情况二：使用命名导出时

import React, { Component } from 'react';
import ReactDom from 'react-dom';
import Logo from "../../../assets/app/media/img/logos/logo-1.png";
// 命名导入需要用{}包裹，名字要和导出的完全一致
import { currYear } from "../SysFunctions/SysFunction";

export default class Login extends Component {
  render() {
    return (
      <div>
        当前年份：{currYear()}
      </div>
    );
  }
}

额外注意事项 #

• 工具函数如果不需要使用React的任何API（比如JSX、Hooks、组件生命周期等），完全不需要导入React，这样能减少不必要的依赖；
• 确认导入路径的正确性：../SysFunctions/SysFunction要和你的实际文件路径、文件名（包括大小写）完全匹配，否则会出现模块找不到的错误；
• React组件的render方法必须返回一个单一的JSX根元素（可以是div、Fragment或者其他组件），不能直接返回原始值（比如这里的年份数字），必须把它嵌入到JSX结构中。

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