React 路由器：如何导入函数

Question

我想将函数 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 文件中正确导出和使用此函数？

Answer 1

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

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

然后这样导入：

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

React 路由器：如何导入函数

React router: How to import functions

javascript

import

export

reactjs

react-router