无法访问相邻JS文件中的函数

Question

目前，在我的目录中，App.js和startMenu.js作为两个单独的文件。我希望使用正确的React格式访问App.js文件中的App.js。目前，我可以使用典型的javascript语法调用函数startMenu()，但由于某种原因，我无法使React语法{startMenu}工作。任何想法都将不胜感激。

我的代码：

import React from "react";
import startMenu from './startMenu';
import credits from "./credits";

var param = 'start';

class App extends React.Component {
  renderSwitch(param) {

    switch(param) {
      case 'credits':
        return credits();
      default:
        /*LINE IN QUESTION */ 
        return startMenu();
    }
    
  }
  
  render() {
    return (
      <div>
        {this.renderSwitch(param)}
      </div>
    );
  }
}

export default App;

谢谢!

Answer 1

这取决于您导出函数的方式。

如果这样做的话：

export default startMenu;

然后，您可以通过这种方式导入：

import myFunction from './path';

那样的话这个名字就很重要了。默认情况下，导出时可以使用任意名称调用函数。

但是如果你是这样出口的话：

export { startMenu };

或

export startMenu;

因此，您需要通过reall名称导入函数，如果只使用export word导出，则所有成员都将位于对象内。

所以你需要这样做：

import MyFunctions from './path';

或者做进口销毁

import { startMenu } from './path';

Answer 2

您需要正确导出该函数：

export function startMenu(...) { ... }

然后导入它：

import { startMenu } from './startMenu';

如果这是唯一导出的东西，那么您可以始终使用export default，并且它简化了导入。

您只能导入已导出的内容。其他一切都被认为是私人的，是禁止的。

Answer 3

JSX语法：{foo}的意思是“将数据放在这里”。

这并不意味着“将此变量称为函数”。

如果您想调用它，您需要显式地这样做：{foo()}。