Как вызвать функцию в одном классе из другого класса в REACT

Question

У меня есть функция routerTest () в файле с именем router.js , в котором есть некоторый 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.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`