我获取 this.props.children 里面的数据；

Question

我是 react 新手，我有一个很好的登录功能，但我需要使用 this.props.children 发送有关用户的下一页信息。我希望你能帮助我我的路线中的鳕鱼是下一个

<BrowserRouter>
        <Switch>
          <Route path="/" exact component={Carrousel} />
          <Route path="/registro" component={Register} exact/>
          <Route path="/login" component={Login} exact/>
          <Route path="/contact" component={Contact} exact/>
          <AuthComponent>
          <Route path="/protected" component={Protected} exact />
          </AuthComponent>
        </Switch>
      </BrowserRouter>

我在 authComponent 中的登录代码

import React, {Component} from 'react';
import axios from 'axios';
import { withRouter } from 'react-router-dom';
class AuhtComponent extends Component{
  constructor(props){
    super(props);

    this.state={
      user: undefined
    }
  }
  componentDidMount(){
   this.getUser();
  }
  getUser() {
    const jwt = getJwt();
    if (!jwt) {
      this.setState({
        user: null
      });
      return;
    }

    axios.get('getUser', { headers: { Authorization: `Bearer ${jwt}`} }).then(res => {
      this.setState({
        user: res.data
      })
    });
  }

  render(){
    const { user } = this.state;
    if (user === undefined) {
      return (
        <div>
          Loading...
        </div>
      );
    }

    if (user === null) {
      this.props.history.push('/login');
    }

    return this.props.children;
  }
}

export default withRouter(AuhtComponent);

现在我想恢复受保护的 nex 组件中的信息，但我

import React, {Component} from 'react';

class Inicio extends Component{
  render(){
    return(
        <h1>{this.state.user}</h1>
    )
  }
}

欢迎大家帮忙

Answer 1

您应该使用 HOC（高阶组件）：

工作版本链接：

https://codesandbox.io/s/busy-booth-hwllz

代码：

const withAuth = WrappedComponent =>
  class extends React.Component {
    constructor(props){
    super(props);

    this.state={
      user: undefined
    }
  }

  componentDidMount(){
   this.getUser();
  }

  getUser() {
    const jwt = getJwt();
    if (!jwt) {
      this.setState({
        user: null
      });
      return;
    }

    axios.get('getUser', { headers: { Authorization: `Bearer ${jwt}`} }).then(res => {
      this.setState({
        user: res.data
      })
    });
  }

  render(){
    const { user } = this.state;
    if (user === undefined) {
      return (
        <div>
          Loading...
        </div>
      );
    }

    if (user === null) {
      this.props.history.push('/login');
    }

    return <WrappedComponent {...this.props} user={user}/>;
  }
  };

export default withAuth;

并像这样使用它：

<BrowserRouter>
        <Switch>
          <Route path="/" exact component={Carrousel} />
          <Route path="/registro" component={Register} exact/>
          <Route path="/login" component={Login} exact/>
          <Route path="/contact" component={Contact} exact/>
          <Route path="/protected" component={withAuth(Protected)} exact />
        </Switch>
</BrowserRouter>