React导出函数报错：找不到变量，求跨组件调用正确方法

我帮你排查了代码里的问题，主要是几个小细节导致的报错，咱们一步步修正：

1. 修正React组件基类的导入错误 #

你在组件里写的import {components} from 'react'有两处问题：

• React的组件基类是大写的Component，不是小写开头的components
• 它是单个导出的Component，不是复数形式

所以这行要改成：

import {Component} from 'react';

2. 确认函数导出与导入的路径正确性 #

你的函数导出代码本身是没问题的：

export function myFunction(param) {
  // 这里可以写你的业务逻辑
  var ret = param;
  return ret;
};

但要确保./class.js这个路径是准确的：

• 如果class.js和当前组件文件在同一目录下，这个路径是对的
• 如果不在同一目录，要调整相对路径（比如父目录用../class.js）
• 注意文件名的大小写（在Linux/macOS系统上，文件名区分大小写，比如Class.js和class.js是两个不同文件）

3. 补充组件必要的render方法 #

你的组件缺少render方法，这会导致React组件报错，必须添加这个方法（哪怕只是返回null占位）。

修正后的完整组件代码 #

import {Component} from 'react';
import {myFunction} from './class.js';
import {Alert} from 'react-native';

class myClass extends Component {
  componentDidMount() {
    var val = myFunction('the param');
    Alert.alert(val);
  }

  render() {
    // 这里可以替换成你的组件UI代码
    return null;
  }
}

// 如果需要把这个组件导出给其他地方使用，加上这行
export default myClass;

额外的可选方案：默认导出函数 #

如果你想把函数改成默认导出，class.js可以写成：

function myFunction(param) {
  var ret = param;
  return ret;
};

export default myFunction;

对应的导入方式就要改成：

import myFunction from './class.js';

这样调整后，你的代码应该就能正常运行，不会再出现找不到变量的报错了。

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