编程语言
首页 > 编程语言> > javascript-React-Router子项不传播

javascript-React-Router子项不传播

作者：互联网

我正在尝试使用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

任何帮助将是巨大的！

编辑：我编辑了要从“ ./containers/Login”导入的第一个代码段.从导入“ ./containers/Login”中的{登录}；

这是简化问题的一种.我原来有另一种方式,因为我实际上是在容器中使用index.js并从’./containers’调用import {Login}；

我已经遍历了代码,它显示Index.js中的Login不是未定义的,但是当我进入App.js时是子级的

以下是在同一运行中index.js和App.js中的断点的屏幕截图. index.js显示Login已初始化,但子级未定义.

index.js

[

好的,我现在已将整个事情尽可能简化为一个文件,但仍然无法正常工作

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);

然后我运行它并得到以下内容

enter image description here

然后,我添加了< Child />直接进入App的render属性,并得到这个

enter image description here

因此,这与我如何导入文件等无关.

解决方法:

解决方案非常简单.更换

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

与

import  Login  from './containers/Login';

在您的index.js中

您的子属性始终为“未定义”的原因是因为传递的组件为“未定义”：

enter image description here

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

查看完整代码：
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进行证明
enter image description here

标签：reactjs,react-router,javascript
来源： https://codeday.me/bug/20191119/2033862.html