Question

我将Profile组件包装在一个HOC中，该组件应该在用户以这种方式退出后将其重定向到某个页面，就像这样：

<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet-src.js"></script>


<script src="https://rawgit.com/Wildhoney/Leaflet.FreeDraw/master/dist/leaflet-freedraw.iife.js"></script>
<script src="https://npmcdn.com/leaflet.path.drag/src/Path.Drag.js"></script>
<section class="map"></section>

我收到此错误：

错误：对象作为React子对象无效（找到：带有键{$$ typeof，type，compare，WrappedComponent，displayName}的对象）。如果要渲染子级集合，请改用数组。

这是我的HOC：

           <Route
                path="/profile/:username"
                  render={props=> withAuth(<Profile currentUser={currentUser} {...props} />)}
            />

这是我的个人资料组件：

import React, { Component } from "react";
import { connect } from "react-redux";


export default function withAuth(ComponentToBeRendered) {
    class Authenticate extends Component {
        componentDidMount() {
            if (this.props.isAuthenticated === false) {
                this.props.history.push("/signin");
            }
        }
        componentWillUpdate(nextProps) {
            if (nextProps.isAuthenticated === false) {
                this.props.history.push("/signin");
            }
        }
        render() {
            
            return ComponentToBeRendered ;
        }
    }
    function mapStateToProps(state) {
        return {
            isAuthenticated: state.currentUser.isAuthenticated
        }
    }
    
    return connect(mapStateToProps)(Authenticate);
}

Answer 1

在您的HOC中

render() {
    
    return <ComponentToBeRendered {...this.props}/> ;
}

在您的路由器中

   const ProfileWithAuth = withAuth(Profile)
   <Route
        path="/profile/:username"
          render={props=> (<ProfileWithAuth currentUser={currentUser} {...props}/>)}
    />

在HOC中包装React Route渲染组件

1 个答案: