Question

构建我的第一个React应用程序，我正在尝试在经过身份验证的内部＆＃39;内创建一个嵌套路由器。页面，但它证明非常困难。我尝试了很多方法，但这是最新版本 - 我在AuthenticatedFrame组件中收到cannot read 'children' property of undefined错误。

export class NavigationFrame extends React.Component<INavigationFrameProps, {}> {
    render() {
        console.log(this.props)
        console.log(this.state)
        console.log(this.props.store.store.getState())
        return <Router>
                  <div className="navigation-frame">
                  <Route exact path="/" component={Splash}/>
                  <Route exact path="/register" component={RegistrationForm}/>
                  <Route path="/signin" component={SignInContainer}/>
                  <Route path="/i" render={() => (
                        this.props.store.store.getState().authenticationState.authenticated ? (
                            <AuthenticatedFrame>
                                <Route exact path="/i/" component={WelcomePage}/>
                                <Route path="/i/add" component={AddPage}/>
                            </AuthenticatedFrame>
                        ) : (
                            <Redirect to="/signin"/>
                        )
                        )}/>
                  </div>
               </Router>;
    }
}

我的AuthenticatedFrame（不起作用）

export const AuthenticatedFrame = () => (
    <div className="internal-view">
    <SidebarDrawer />
    <div className="content-area">
        {this.props.children}
    </div>
    </div>)

Answer 1

AuthenticatedFrame是一个功能组件，因此无法访问this关键字，您需要访问道具作为函数参数，如

export const AuthenticatedFrame = (props) => (
    <div className="internal-view">
       <SidebarDrawer />
       <div className="content-area">
          {props.children}
       </div>
    </div>
)

Answer 2

URF。我只需要用以下方法更改Authenticated Frame：

export class AuthenticatedFrame extends React.Component<{children: any}, {}> {
    render() { return <div className="internal-view">
    <SidebarDrawer />
    <div className="content-area">
        {this.props.children}
    </div>
    </div>}

无法在路由反应组件内渲染子项（更不用说路由子项）了

2 个答案: