React react-router-dom 将 props 传递给组件 [英] React react-router-dom pass props to component

问题描述

我需要使用路由器将道具传递给组件.这是我的代码:

import React, { Component, PropTypes } from 'react';从'react-redux'导入{连接}；从 './appbar/AppBarTop' 导入 AppBarTop；从'../pages/login/Login'导入登录；从'react-router-dom'导入{BrowserRouter as Router, Route}；类应用扩展组件{使成为() {常量 { isAuthenticated } = this.props;返回 (<路由器>
<AppBarTop isAuthenticated={isAuthenticated}/><div className="内容"><Route path="/login" isAuthenticated={isAuthenticated} 组件={Login}/></div></div></路由器>);}}

如您所见，isAuthenticated 我想传递给登录组件的道具.

类登录扩展组件{构造函数(道具){超级(道具)；控制台日志(道具)；}使成为() {返回 (<登录表单/>);}}导出默认连接(空)(登录)；

当我记录道具时，isAuthenticated 道具不存在.我做错了什么?我怎样才能正确传递道具?我关注了文档和其他讨论.据我了解，它应该可以工作.react-router 和 react-router-dom 的版本是 4.0.0

解决方案

这样传递:

应该可以通过登录组件中的this.props.isAuthenticated获得.

{...props}的原因:

如果我们不写这个，那么只有 isAuthenticated 会被传递给 Login 组件，路由器传递给组件的所有其他值在 Login 组件中将不可用.当我们编写 {...props} 时，我们将所有值都传递给一个额外的值.

而不是使用 component 和路由器使用 render 方法.

根据 DOC:

组件:

<块引用>

当你使用组件(而不是渲染或子，下面)路由器使用 React.createElement 从给定的组件.这意味着如果您向组件属性，您将在每次渲染时创建一个新组件.这会导致现有组件卸载和新的组件安装，而不是仅仅更新现有组件.使用内联函数进行内联渲染时，请使用渲染.

渲染:

<块引用>

这允许方便的内联渲染和包装，而无需不需要的重新安装.

I need to pass props to component using router. Here's my code:

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import AppBarTop from './appbar/AppBarTop';

import Login from '../pages/login/Login';
import {BrowserRouter as Router, Route} from 'react-router-dom';


class App extends Component {

    render() {

        const { isAuthenticated } = this.props;

        return (
            <Router>
                <div>
                    <AppBarTop isAuthenticated={isAuthenticated} />
                    <div className="content">
                        <Route path="/login" isAuthenticated={isAuthenticated} component={Login} />
                    </div>
                </div>
            </Router>
        );
    }
}

As you can see, isAuthenticated the prop i want to pass to Login component.

class Login extends Component {

    constructor(props) {
        super(props);
        console.log(props);
    }

    render() {
        return (
            <LoginForm />
        );
    }

}

export default connect(null) (Login);

When i log the props the isAuthenticated prop is not there. What i'm doing wrong? How can i pass the prop correctly? I followed the docs and also other discussions. From my understanding it should work. The version of react-router and react-router-dom is 4.0.0

解决方案

Pass it like this:

<Route 
    path="/login" 
    render={(props) => <Login {...props} isAuthenticated={isAuthenticated}/>} 
/>

It should be available by this.props.isAuthenticated in Login Component.

Reason of {...props}:

If we don't write this then only isAuthenticated will get passed to Login component, all other values that router passes to component, will not be available inside Login component. When we write {...props} then we are passing all the values with one extra value.

And instead of using component with router use render method.

As per DOC:

Component:

When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component attribute, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component. When using an inline function for inline rendering, use the render.

Render:

This allows for convenient inline rendering and wrapping without the undesired remounting.

这篇关于React react-router-dom 将 props 传递给组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！