Question

在使用react-router并尝试将道具降低两级时，我无法将道具传递给不同的组件。

我有我的主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>

Auth组件JSX：

<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>

实际上，会出现SplashPage组件，并出现Auth组件，但我无法实际登录，因为我需要访问app.js中的函数和状态。

此外，一旦我开始工作，我就希望能够通过JS路由到Auth的不同组件，使用类似的东西：

this.history.push("/packingList")

不知道我是如何在那里传递道具的，但是时间会证明！公顷

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

Answer 1

这是因为你没有通过道具。

在“SplashPage Component 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>

请注意Auth组件：

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

我没有看到你传递任何props通过..也许尝试类似于你的主Router渲染：

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

麻烦将道具传递给组件，特别是两个级别 - React Router，Javascript

1 个答案: