javascript - 如何在 REACT 中从另一个类调用一个类中的函数

Question

我在名为 router.js 的文件中有 routerTest() 函数，其中包含一些需要呈现的 HTML。

class Router extends Component {
  // Component constructor

constructor (props) {

// Call parent constructor
super(props)

// Set initial component state
  this.state = {
    line_of_business: 'Auto',
    displayingDropdown: true,
    open: false
  }
}

static routerTest () {
     return (
        <div>
          <Route exact path={paths.HOMEPAGE_PATH} render={() => (<Homepage {...this.state} />)} />
          <Route exact path={paths.GROUPS_PAGE_PATH} render={routeProps => (<GroupsPage {...routeProps} {...this.state} />)} />
          <Route exact path={paths.PROJECTS_PAGE_PATH} render={() => (<ProjectsPage {...this.state} />)} />
          <Route exact path={paths.METAGROUP_PAGE_PATH} render={routeProps => <MetagroupPage {...routeProps} {...this.state} />} />
          <Route path={paths.GROUP_PAGE_PATH} render={routeProps => (<GroupPage {...routeProps} {...this.state} />)} />
          <Route path={paths.PROJECT_PAGE_PATH} render={routeProps => (<ProjectPage {...routeProps} {...this.state} />)} />
          <Route exact path={paths.FAQS_PAGE_PATH} render={() => (<FAQSPage {...this.state} />)} />
          <Route exact path={paths.ABOUT_PAGE_PATH} render={() => (<AboutPage {...this.state} />)} />
        </div>
     )
  }
}

export default Router

在我想要调用此函数的其他类中，我使用以下语句导入了该类:import Router from './router.js'。在其他类的渲染函数中，我有以下代码:

// Render function

render () {
 return (
  <React.Fragment>
    <BrowserRouter>
      <div>      
        <NavigationBar {...this.state} handleChange={this.handleChange} setVisibility={this.setVisibility} openSearchBar={this.openSearchBar} />
        {Router.routerTest()}
      </div>
    </BrowserRouter>
  </React.Fragment> 
 )
}

我该如何进行这项工作？我需要做的就是调整我的代码，以便 Router 类中的内容可以在其他类中调用。我需要有两个类，否则 this.state 的东西将无法工作。

Answer 1

要拥有良好的项目结构，请创建一个辅助函数 helpers.jsx。

并导出函数，如下所示。

export default function routerTest () {
     return (
        <div>
          <Route exact path={paths.HOMEPAGE_PATH} render={() => (<Homepage {...this.state} />)} />
          <Route exact path={paths.GROUPS_PAGE_PATH} render={routeProps => (<GroupsPage {...routeProps} {...this.state} />)} />
          <Route exact path={paths.PROJECTS_PAGE_PATH} render={() => (<ProjectsPage {...this.state} />)} />
          <Route exact path={paths.METAGROUP_PAGE_PATH} render={routeProps => <MetagroupPage {...routeProps} {...this.state} />} />
          <Route path={paths.GROUP_PAGE_PATH} render={routeProps => (<GroupPage {...routeProps} {...this.state} />)} />
          <Route path={paths.PROJECT_PAGE_PATH} render={routeProps => (<ProjectPage {...routeProps} {...this.state} />)} />
          <Route exact path={paths.FAQS_PAGE_PATH} render={() => (<FAQSPage {...this.state} />)} />
          <Route exact path={paths.ABOUT_PAGE_PATH} render={() => (<AboutPage {...this.state} />)} />
        </div>
     )
  }
}

并通过

在其他组件中调用它

import { routerTest } from ./helpers`