Question

我有一个使用reactjs运行的多页Web应用程序。我试图为特定页面定义自定义react-breadcrumb 这涉及提取一个值并在面包屑中使用它

运行下面的代码，我可以看到控制台选择了jobName 但如果我看看面包屑，我就会坚持

home > templates > Missing name prop from Route

我不太明白为什么变量没有被路由器接收。如果我只是硬编码，它会工作。有什么建议吗？

getTemplateJobName(templateId,dateChosen){
    doGetJobById({jobId: templateId,reconDate: dateChosen}).then(
    ({body: template})=>{ 
        let {jobName: jobName}=template;
        console.log(jobName);
        return jobName;
    });
},

render(){
  return (
    <div>
    <Router history={browserHistory}>
        <Route name='home' path={'/'+contextName}>
            <IndexRoute  component={LandingPage}/>
            <Route name='templates' path='templates'>
                <IndexRoute component={JobPage}/>
                <Route path=':reconDate&:templateId' component={JobDetailPage} staticName={true} getDisplayName={(params) => this.getTemplateJobName(params.templateId,params.reconDate)}/>
            </Route>
            <Route name='report' path='report' component={ReportPanel}/>
        </Route>
        <Route path='*' component={NotFoundPage}/>
    </Router>

Answer 1

请试试这个;

export default App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      DisplayName: ''
    };
  }

  getTemplateJobName(templateId,dateChosen) {
    doGetJobById({jobId: templateId,reconDate: dateChosen}).then(
      ({body: template})=>{ 
        let {jobName: jobName}=template;
        console.log(jobName);
        // return jobName; 
        this.setState({ DisplayName: jobName });
      }
    );
  }

  getDisplayName(params) {
    this.getTemplateJobName(params.templateId,params.reconDate);
    return this.state.DisplayName;
  }


  render() {
    return 
    (<div>
        <Router history={browserHistory}>
          <Route name='home' path={'/' + contextName}>
          <IndexRoute  component={LandingPage}/>
          <Route name='templates' path='templates'>
            <IndexRoute component={JobPage}/>
            <Route path=':reconDate&:templateId' component={JobDetailPage} staticName={true} getDisplayName={ this.getDisplayName.bind(this) }/>
          </Route>
          <Route name='report' path='report' component={ReportPanel}/>
        </Route>
        <Route path='*' component={NotFoundPage}/>
      </Router>
    </div>)
  }
}

React-BreadCrumbs不从方法中获取变量

1 个答案: