无法将道具传递到组件，特别是两级向下反应路由器Javascript

当我使用react路由器并试图将道具降低两个级别时，我很难将道具传递到不同的组件

我有我的主app.js，在那里我会立即路由到我的SplashPage组件，然后在SplashPage中，我会在JSX中调用我的身份验证组件，而不是通过路由，只是使用一些道具

问题是，我的Auth组件需要app.js中的道具，但由于我在SplashPage组件中引用了它，这些道具没有正确传递，导致控制台错误，告诉我它尝试使用的各种函数不存在警告：\不是函数

下面是我的app.js JSX的样子。现在我正在尝试将道具传递到SplashPage，这样我也可以将道具从那里传递到Auth，但目前为止运气不好

<Router history={BrowserHistory}>
    <Switch>
         <Route exact path='/' render={(props) => ( <SplashPage {...props} isAuth={this.setIsAuth} authClasses={this.state.authPageClasses} />)} />
         <Route path='/auth' render={(props) => ( <Auth {...props} isAuth={this.setIsAuth} authClasses={this.state.authPageClasses} />)} />
        <Route path='/packingList' render={(props) => ( <PackingList {...props} isAuth={this.state.isAuth} email={this.state.email} user={this.state.user} name={this.state.name} />)} />
    </Switch>
</Router>

也不知道我会如何在那里传递道具，但时间会证明一切！哈

---

希望我解释得很好！当涉及到多个组件时，我开始有点难以解释。如果没有，我可以提供更多信息。谢谢

这是因为你没有通过道具

在SplashPage组件JSX中：

<section className="splashPage">
     <div className={this.state.topWallClasses}>
         <h1>PackTracker</h1>
         <button onClick={this.enterSite}>start tracking!</button>
         <div className="overhang">
             <img src="public/assets/backpackRed.png" alt=""/>
         </div>
     </div>
     <div className={this.state.bottomWallClasses}></div>
     <Auth isAuth={this.setIsAuth} authClasses={this.state.authPageClasses} />
 </section>

<Router history={BrowserHistory}>
     <Switch>
         <div>
             <Route path='/packingList' component={PackingList}/>
             <section className={this.props.authClasses}>
                 <ul>
                     <li><a href="" className="signup" onClick={this.formToShow}>Sign Up</a></li>
                     <li><a href="" className="login" onClick={this.formToShow}>Log In</a></li>
                 </ul>
                 {loginForm}
             </section>
         </div>
     </Switch>
</Router>

<section className="splashPage">
   <div className={this.state.topWallClasses}>
       <h1>PackTracker</h1>
       <button onClick={this.enterSite}>start tracking!</button>
       <div className="overhang">
         <img src="public/assets/backpackRed.png" alt=""/>
       </div>
   </div>
   <div className={this.state.bottomWallClasses}></div>
   <Auth isAuth={this.setIsAuth} authClasses={this.state.authPageClasses} />
 </section>

我没看到你把任何道具穿过。。也许可以尝试与主路由器渲染类似的方法：

<Auth {...this.props} isAuth={this.setIsAuth} authClasses={this.state.authPageClasses} />

---

如果我理解了你想要做的事情，我想这可能就是你想要把道具传递到第二关的方式。例如，在您的SplashPage中，Auth组件：应该看起来像是您希望通过在传递它的组件中指定的道具名称来引用它们，您在App.js中调用的是isAuth。如果是功能组件，则为props.isAuth；如果是Classic，则为this.props.isAuth。我看不出您从SplashPage向Auth传递了道具。也许这就是为什么？至于第二部分：你可以使用[高阶组件。您可能想使用RouterApp导出默认值；嘿，谢谢您的建议！但是，我在代码中做了更改，没有任何更改：是的，这不是一个解决方案，只是一个正确方向的提示。想想您要传递的内容-这些道具的值是什么？您的Auth组件是什么setIsAuth的实现在哪里？setIsAuth在app.js中更改了一些状态，然后在我的PackingList组件中，我根据该状态执行操作

<Auth isAuth={this.setIsAuth} authClasses={this.state.authPageClasses} />

<Auth {...this.props} isAuth={this.setIsAuth} authClasses={this.state.authPageClasses} />