0

如何将usernameas 道具从功能性无状态父级传递给功能性无状态子级到另一个有状态子级？

目前它显示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

4

2 回答 2

0

您没有正确地将道具 UserName 从 App 组件传递给 Home。Route 的渲染回调函数提供了 Router 的 props 而不是组件的 props

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>
 )
}
于 2019-02-05T07:58:39.783 回答
0

我实际上发现了它不起作用的原因。由于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>
 )
}
于 2019-02-05T19:15:06.377 回答