react-router children 未传播

Question

我正在尝试使用 react-router 但我无法传播 children 组件。

index.js

import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';

import App from './App';

import Login from './containers/Login';

const rootElement = document.getElementById('app');

render((
 <Router history={browserHistory}>
  <Route path="/" component={App}>
   <Route path="login" component={Login}/>
  </Route>
 </Router>
), rootElement);

App.js

import React, { Component, PropTypes } from 'react';
import { Login } from './containers';

export default class App extends Component {

 constructor(props) {
  super(props);
 }

 render() {
  const { children } = this.props;
  return (
   <div className="content">
    {children}
   </div>
  );
 }
}

App.propTypes = {
 children: PropTypes.any,
};

LoginPage.js

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';

import { Login } from '../components';

export default class LoginPage extends Component {

 constructor(props, context) {
  super(props, context);
 }

 handleSubmit(event) {
  event.preventDefault();
 }

 render() {
  const { handleSubmit, redirect } = this.props;
  return (
   <Login handleSubmit={handleSubmit}
          redirect={redirect}
   />
  );
 }
}

LoginComponent.js

import React, { Component, PropTypes } from 'react';

export default class Login extends Component {

 constructor(props, context) {
  super(props, context);

  this.state = {
   email: '',
   password: '',
  };
 }

 handleChange(field, event) {
  const nextState = this.state;

  nextState[field] = event.target.value;

  this.setState(nextState);
 }

 handleSubmit(event) {
  event.preventDefault();

  this.props.handleSubmit(this.state);
 }

 render() {
  return (
   <form onSubmit={event => this.handleSubmit(event)}>
    <input
     type="text" placeholder="Email"
     value={this.state.email}
     onChange={this.handleChange.bind(this, 'email')}
    />
    <input
     type="password" placeholder="Password"
     value={this.state.password}
     onChange={this.handleChange.bind(this, 'password')}
    />
    <input type="submit" value="Submit"/>
   </form>
  );
 }
}

Login.propTypes = {
 handleSubmit: PropTypes.func.isRequired,
};

如果我只是将 LoginPage 直接导入到 App.js 中，然后我尝试渲染 {children}，它就可以正常工作。检查时它只是说 children 未定义

反应@0.14.6

react-dom@0.14.6

react-router@2.0.0-rc5

作为旁注，我运行 npm list react-router 我得到了这个

`-- (empty)

npm ERR! code 1

任何帮助都会很棒！！

编辑：我将第一个代码片段编辑为 import Login from './containers/Login'; 来自 import { Login } from './containers/Login';

那是一种简化问题的类型。我最初是用另一种方式使用的，因为我实际上对容器使用 index.js 并且正在调用 import { Login } from './containers';

我已经逐步完成代码，它表明 Login 在 index.js 中不是未定义的，但是 children 是当我到达 App.js

时

下面是在index.js和App.js同一个运行中断点的截图。 index.js 显示登录已初始化，但随后 children 未定义。

[

好吧，我现在已经尽可能地将整个事情简化为一个文件，但它仍然不起作用

import 'babel-polyfill';
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';

class App extends Component {

 constructor(props) {
  super(props);
 }

 render() {
  const { children } = this.props;
  return (
   <div className="content">
    {children}
   </div>
  );
 }
}

class Child extends Component {
 render() {
  return (
   <p>I am a child</p>
  );
 }
}

const rootElement = document.getElementById('app');

render((
 <Router history={browserHistory}>
  <Route path="/" component={App}>
   <Route path="login" component={Child}/>
  </Route>
 </Router>
), rootElement);

然后我运行它得到了以下

然后我把<Child />直接加到App的render属性里面就得到了这个

所以这不是我导入文件等方式的问题

Answer 1

解决方法很简单。替换

import { Login } from './containers/Login';

和

import  Login  from './containers/Login';

在你的 index.js

为什么你的child属性总是'undefined'是因为传递的组件是'undefined':

如果您对导入语法有疑问，我可以推荐这个 SO 问题“”

查看完整代码： index.js

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';

import App from './App';
import Login from './containers/LoginPage';

const rootElement = document.getElementById('app');

render((
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <Route path="login" component={Login}/>
        </Route>
    </Router>
), rootElement);

App.js

import React, { Component, PropTypes } from 'react';

export default class App extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        const { children } = this.props;
        return (
            <div className="content">
                {children}
            </div>
        );
    }
}

App.propTypes = {
    children: PropTypes.any,
};

./containers/LoginPage.js

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';

import Login from '../components/Login';

export default class LoginPage extends Component {

    constructor(props, context) {
        super(props, context);
    }

    handleSubmit(event) {
        event.preventDefault();
    }

    render() {
        const { handleSubmit, redirect } = this.props;
        return (
            <Login handleSubmit={handleSubmit}
                   redirect={redirect}
            />
        );
    }
}

./components/Login.js

import React, { Component, PropTypes } from 'react';

export default class Login extends Component {

    constructor(props, context) {
        super(props, context);

        this.state = {
            email: '',
            password: '',
        };
    }

    handleChange(field, event) {
        const nextState = this.state;

        nextState[field] = event.target.value;

        this.setState(nextState);
    }

    handleSubmit(event) {
        event.preventDefault();

        this.props.handleSubmit(this.state);
    }

    render() {
        return (
            <form onSubmit={event => this.handleSubmit(event)}>
                <input
                    type="text" placeholder="Email"
                    value={this.state.email}
                    onChange={this.handleChange.bind(this, 'email')}
                />
                <input
                    type="password" placeholder="Password"
                    value={this.state.password}
                    onChange={this.handleChange.bind(this, 'password')}
                />
                <input type="submit" value="Submit"/>
            </form>
        );
    }
}

Login.propTypes = {
    handleSubmit: PropTypes.func.isRequired,
};

用 react 0.14.6 和 react-router 2.0.0-rc5 证明

Answer 2

好的，所以回答我自己的问题。基本上是一个非常愚蠢的错误，但也许有人会受益。我使用 localhost/#/child 是因为我认为这是应该说的，并且 localhost/child 命中了我服务器上的注册路由。所以解决方法是让我的 server-side 路由处理程序

router.get('/*', (req, res) => {
  res.render(view);
});

然后导航到localhost/child

react-router children 未传播

react-router children not propagating

javascript

reactjs

react-router