javascript - 组件 this.props 日志记录在控制台中未定义，但显示在 React 开发人员工具中

Question

私有(private)路由定义:

PrivateRoute = ({ component: Component, ...rest }) => (
                <Route {...rest} render={props => (
                    this.state.isAuthenticated
                    ? <Component {...props} />
                    : <Redirect to="/" />
                )}/> 
            )

将路由器中的属性传递给 Home:

<this.PrivateRoute path="/home" exact component={Home} portalId={this.state.portalId} />

React 开发者工具显示:

控制台日志:

我的 props.portalId 在哪里？我在另一个组件中获取后设置 this.props.portalId 所以这可能是因为异步调用的问题？在那种情况下我该如何解决？

编辑:Console.log 在 Home 的 componentDidMount() 中被调用:

class Home extends Component {     
  componentDidMount() {
     console.log(this.props.portalId);
}

Answer 1

要查看 Prop ，您应该将 Prop 传递给 <Route /> 渲染的组件，而是将 Prop 传递给 <Route /> .

你可以像这样使用 render 属性而不是组件:

<Route to="/anywhere" render={() => <YourComponent {...yourProps} />} />

我用过一次component Prop :

<Route to="/anywhere" component={() => <YourComponent {...yourProps} />} />

可以使用，但建议使用 render .

它有时在 github 上讨论过，你可以看到。

编辑工作示例:

PrivateRoute = ({ component: Component, ...rest }) => (
            <Route render={props => (
                this.state.isAuthenticated
                ? <Component {...props} {...rest}  />
                : <Redirect to="/" />
            )}/> 
        )

我在我的环境中模拟了你的例子，我把 rest 对象放在 <Component /> 中定义，它对我有用，试试看会发生什么。

当我这样做时它起作用了:

PrivateRoute = ({ component: Component, ...rest }) => (
                <Route {...rest} render={() => (
                    this.state.isAuthenticated
                    ? <Component {...this.props}/>
                    : <Redirect to="/" />
                )}/> 
            )

<this.PrivateRoute path="/home" exact component={() => <Home portalId={this.state.portalId} />} />