javascript - react 路由器 child 不传播

Question

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

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} 的地方它工作得很好。在检查中它只是说 child 是未定义的

react @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 的渲染属性得到了这个

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

Answer 1

解决方案非常简单。替换

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

与

import  Login  from './containers/Login';

在你的 index.js 中

您的子属性总是“未定义”的原因是因为传递的组件是“未定义”的:

如果您对导入语法有疑问，我可以推荐这个 SO 问题“using brackets with javascript import syntax”

查看完整代码: 索引.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 证明