Question

我有以下路由器配置：

ReactDOM.render((
  <Router history={History.createHistory()}>
    <Route path="/" component={Page}>
      <IndexRoute component={OverviewDashboard}/>
      <Route path="/:env" component={Env}>
        <IndexRoute component={EnvOverview}/>
      </Route>
    </Route>
  </Router>
), document.getElementById('page'));

以及以下组件定义：

const Page = React.createClass({
  render: function () {
    return (
      <main>
        <Header />
        {this.props.children}
      </main>
    );
  }
});

const OverviewDashboard = React.createClass({
  render: function () {
    return (
      <section>
        <Env name="Env1" />
        <Env name="Env2" />
       </section>
     );
  }
});

const Env = React.createClass({
  render: function() {
    return (
      <section className="env">
        <header>{this.props.params && this.props.params.env || this.props.name}</header>
         {this.props.children}
       </section>
     );
   }
});

const EnvOverview = React.createClass({
  render: function() {
    return (
      <div>
        <Jobs env={this.props.params.env}/>
        <Runtime env={this.props.params.env}/>
      </div>
    )
   }
 });

我已经省略了<Header>, <Jobs>和<Runtime>的定义，因为它们不相关。

当我转到/ {this.props.children}内的<Env>组件时，组件未定义，因此未呈现。

但是，当我转到“/ Env1”时，{this.props.children}已正确设置为<EnvOverview>并显示。

我是React的新手，可能我错误地使用了路由组件。有人可以解释在访问<EnvOverivew>链接时如何呈现/？

Answer 1

当您转到/Env时，react-router会呈现您的/:env路由，其组件为Env。在此路线中，您有一个IndexRoute。此IndexRoute将EnvOverview组件呈现为其父路由子组件。因此，在这种情况下你得到{this.props.children}。

当您输入/路线时，会触发IndexRoute内部App，其成员为OverviewDashboard。它没有输入/:env路由，因为您没有提供匹配:env的参数。

在OverviewDashboard内，您手动渲染两个环境，而不提供子女（check this）。因此，在这两个环境中，{this.props.children}等于undefined。

我不知道您的要求是什么，但您可以将OverviewDashboard呈现方法更改为：

render: function () {
  return (
    <section>
      <Env name="Env1"><EnvOverview name="Env1" /></Env>
      <Env name="Env2"><EnvOverview name="Env2" /></Env>
    </section>
  );
}

在EndOverview渲染方法中，将env={this.props.params.env}更改为env={this.props.params.env || this.props.name}。

我不知道这是否是您案件的最佳解决方案，但我希望澄清{this.props.children}为undefined的原因;）

反应this.props.children未定义

1 个答案: