Question

我试图启动使用相同的组件，但根据路线传递不同的道具。像这样：

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, IndexRoute, hashHistory } from "react-router";

import Layout from "./pages/Layout";
import ApplicantsContainer from "./pages/ApplicantsContainer";
import Filtered from "./pages/Filtered";
import ApplicantStore from "./stores/ApplicantStore";

const app = document.getElementById('app');
ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={Layout}>
      <IndexRoute/>
      <Route path="new" component={ApplicantsContainer} getData={ApplicantStore.getNew.bind(ApplicantStore)}/>
      <Route path="prescreen" component={ApplicantsContainer} getData={ApplicantStore.getPrescreen.bind(ApplicantStore)}/>
      <Route path="interview" component={ApplicantsContainer} getData={ApplicantStore.getInterview.bind(ApplicantStore)}/>
      <Route path="offer" component={ApplicantsContainer} getData={ApplicantStore.getOffer.bind(ApplicantStore)}/>
      <Route path="hired" component={ApplicantsContainer} getData={ApplicantStore.getHired.bind(ApplicantStore)}/>
      <Route path="declined" component={ApplicantsContainer} getData={ApplicantStore.getDeclined.bind(ApplicantStore)}/>
      <Route path="filtered" component={Filtered}/>
    </Route>
  </Router>,
app);

问题是所有路由都接收到组件的相同实例，并且只使用第一个getData props。如何声明 ApplicantsContainer 组件的不同实例？

Answer 1

您始终可以在<Router/>

之外创建新组件

e.g。你的版本

<Route path="new" component={ApplicantsContainer} 
    getData={ApplicantStore.getNew.bind(ApplicantStore)}/>
<Route path="prescreen" component={ApplicantsContainer}
    getData={ApplicantStore.getPrescreen.bind(ApplicantStore)}/>

可以改写为

 // Assume getData is a prop you need to set in ApplicantsContainer
const ApplicantsContainerForNew = (
  <ApplicantsContainer
    getData={ApplicantStore.getNew.bind(ApplicantStore)}
  />
)

const ApplicantsContainerForPrescreen = (
  <ApplicantsContainer
   getData={ApplicantStore.getPrescreen.bind(ApplicantStore)}
  />
)
...

<Route path="new" component={ApplicantsContainerForNew}/>
<Route path="prescreen" component={ApplicantsContainerForPrescreen} />

使用import在React Router中创建React组件的不同实例

1 个答案: