Как я могу передать `username` в качестве подпорки от функционального родителя без состояния другому функциональному ребенку без состояния другому ребенку с состоянием?

Question

Как я могу передать username как реквизит от функционального родителя без состояния к функциональному ребенку без состояния другому ребенку с состоянием?

В настоящее время это показывает undefined как в первом ребенке, так и во втором ребенке.

Родительский компонент:

  let userName = 'Some UserName';

  export default function App() {
   return (
    <Router>
  <div>
    <AuthButton />
    <Route path="/" render={() => (
      <Redirect to="/auth" />
    )} />
    <Route path="/auth" component={Login} />
    <PrivateRoute
      path='/home'
      component={Home}
      render={(props) => <Home userName={props.userName} />}
    />
  </div>
</Router>
 )
}  

Первый дочерний компонент:

 function Home(props) {

let userName = props.userName

console.log(userName);   // SHOWS UNDEFINED!

return (
    <Router>
        <div>
            <Header />
            <Switch>
                <div className="row cont">
                        <div className="card">
                            <div className="card-header">
                                Messages
                        </div>
                            <div className="card-body">
                                <MessengerApp userName={props.userName} />
                            </div>
                        </div>
                </div>
            </Switch>
            <Footer />
        </div>
    </Router >


   );
 }

Второй дочерний компонент:

class MessengerApp extends React.Component {
 constructor(props) {
    super(props);
   // set the initial state of the application
    this.state = { username: this.props.userName };

 console.log(this.state.username)  // SHOWS UNDEFINED!  

 }

 render(){
     // JSX
  }

Я хочу, чтобы все компоненты регистрировали имя пользователя как Some UserName

Answer 1

Вы не правильно передаете реквизит UserName в Home из компонента App. Функция обратного вызова рендеринга для Route предоставляет реквизиты Router, а не реквизиты компонента

let userName = 'Some UserName';

export default function App(props) {
   return (
    <Router>
        <div>
            <AuthButton />
            <Route path="/" render={() => (
              <Redirect to="/auth" />
            )} />
            <Route path="/auth" component={Login} />
            <PrivateRoute
              path='/home'
              component={Home}
              render={(routerProps) => <Home {...routerProps} userName={userName} />}
            />
          </div>
    </Router>
 )
}  

Answer 2

Я на самом деле выяснил причину, по которой он не работал. Из-за PrivateRoute будучи настроенным компонентом Route, он не распознавал render как способ передать props, Я должен был переместить render props к фактическому Route тег внутри этого PrivateRoute функция. Пожалуйста, смотрите ниже:

let userName = 'Some UserName';


  const PrivateRoute = ({ component: Component, ...rest }) => (
      <Route {...rest} render={(props) => (
       authFunc.isAuthenticated === true
          ? <Component {...props} userName={userName}/>
         : <Redirect to={{
           pathname: '/auth',
           state: { from: props.location }
          }} />
      )} />
     )

export default function App(props) {
   return (
    <Router>
        <div>
            <AuthButton />
            <Route path="/" render={() => (
              <Redirect to="/auth" />
            )} />
            <Route path="/auth" component={Login} />
            <PrivateRoute
              path='/home'
              component={Home}
            />
          </div>
    </Router>
 )
}