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}，那么它的效果非常好。在检查时，它只是说儿童未定义

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显示Login已初始化，但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);未定义。

[ App.js[2]

好的，我已经尽可能地将整个内容简化为单个文件但仍然无法正常工作

<Child />

然后我运行它并得到以下

然后我将App直接添加到std::getline(fileName,inputStr); inputStr.erase( std::remove( inputStr.begin(), inputStr.end(), '\r' ), inputStr.end() ); inputStr.erase( std::remove( inputStr.begin(), inputStr.end(), '\n' ), inputStr.end() );的render属性中并获得了此

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

Answer 1

解决方案非常简单。替换

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

带

import  Login  from './containers/Login';

你的index.js

中的

您孩子的财产始终未定义的原因＆＃39;是因为传递的组件未定义＆＃39;：

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

查看完整代码： 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,
};

./容器/ 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}
            />
        );
    }
}

./组件/ 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命中我的服务器上的注册路由。所以解决方法是制作我的服务器端路由处理程序

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

然后导航到localhost/child

反应路由器的孩子没有传播

2 个答案: