React 路由器：如何导入函数答案

【问题标题】：React router: How to import functionsReact 路由器：如何导入函数
【发布时间】：2020-10-22 21:12:02
【问题描述】：

我想将函数welcome() 从我的App 文件导出到另一个文件AddKit，这是定义我的应用程序页面的文件之一。我尝试了各种方法，但每次都出现此错误：

TypeError: Cannot read property 'welcome' of undefined

App.js：

class App extends Component {
  welcome(){
    return 'TrialOne';
  }

  render() {
    if (!this.state.web3) {
      return <div>Loading Web3, accounts, and contract...</div>;
    }
    return (
       <BrowserRouter>
        <nav>
          <Navigation/>
            <Switch>
             <Route path="/" component={Home} exact/>
             <Route path="/addKit" component={AddKit} exact/>
           </Switch>
        </nav> 
      </BrowserRouter>
    );
  }
}

export default App;

AddKit.js：

import React from 'react';
import welcome from '../App.js'

const AddKit = () => {
    return (
       <div>
          <h1>AddKit</h1>
          <p>AddKit page body content</p>
       </div>
    );
}
 
export default AddKit;

那么，如何在我的 AddKit 文件中正确导出和使用此函数？

【问题讨论】：

这是完整的代码吗？因为大括号不匹配；如果您在App.js 文件中有我们看不到的错误，我不确定下面的答案是否有效（但这是正确的答案，假设代码正确）
@yen 不，这不是完整的代码。缺少的大括号肯定来自缺少的类App extends Components 。谢谢你告诉我:)

标签： javascript reactjs import react-router export

【解决方案1】：

您需要定义如下欢迎功能：

export const Welcome = () => {return ()}

然后以这种方式导入：

import { Welcome } from '../App.js'

【讨论】：

我是否在导出默认应用下方添加export const Welcome = () => anything？如果我明白了，我会用我想要返回的东西来改变任何东西吗？
否，不一定低于导出默认值；我将进行编辑。
是的，你需要添加返回表达式，而不是任何东西。
欢迎功能导入后；在 AppKit.js 中将其用作 welcome() 以获取返回值。
很高兴它对您有所帮助。祝你好运：D