Передача реквизита дочернему компоненту, который использует оболочку

Question

Я новичок, чтобы реагировать.

В моем приложении есть компонент маршрутизатора, и я использую метод рендеринга для передачи реквизитов. Дочерний компонент имеет оболочку, используемую для аутентификации.

Проблема в том, что при переходе к компоненту с оберткой он не имеет видимости реквизита. Извините, поскольку я новичок в этом и не знаю, как передать реквизит дочернему компоненту в этой ситуации.

Я создал несколько тестовых классов для иллюстрации проблемы. После добавления обертки я не могу получить доступ к реквизиту, но он работает без.

Родитель:

import React, { Component } from "react";
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import MyComponent from "./mycomponent";

class MyTest extends Component {
  // Then we add our constructor which receives our props
  constructor(props) {
      super(props);
      // Next we establish our state
      this.state = {
          text: "Passing props to components"
      }
  }


  render() {
    return (
      <HashRouter>
      <div>
      <NavLink to="/rtest" replace>Route Test</NavLink>
      <Route path="/rtest" render={props => (<MyComponent {...props} text={this.state.text}/>)}/>
      </div>
      </HashRouter>
    )
  }

}

export default MyTest

Ребенок:

import React, { Component } from "react";
import AuthService from './auth/AuthService';
import withAuth from './auth/withAuth';

const Auth = new AuthService();


class MyComponent extends Component {
  constructor(props) {
      super(props);
  }


  componentWillMount() {
    console.log(this.props);
  }

  render() {
    return (
      <div>
        <h2>HELLO</h2>
      </div>
    );
  }
}

export default withAuth(MyComponent);

WithAuth:

import React, { Component } from 'react';
import AuthService from './AuthService';

export default function withAuth(AuthComponent) {
    const Auth = new AuthService('http://localhost:8000');
    return class AuthWrapped extends Component {
        constructor() {
            super();
            this.state = {
                user: null
            }
        }

        componentWillMount() {
            //alert(this.props);
            if (!Auth.loggedIn()) {
                this.props.history.replace('/login')
            }
            else {
                try {
                    const profile = Auth.getProfile()
                    this.setState({
                        user: profile
                    })
                }
                catch(err){
                    Auth.logout()
                    this.props.history.replace('/login')
                }
            }
        }

        render() {
            if (this.state.user) {
                return (
                    <AuthComponent history={this.props.history} user={this.state.user} />
                )
            }
            else {
                return null
            }
        }
    };
}