Question

尝试修改组件，主要思想是，我想创建登录页面，尝试修改App.js但得到错误

warning.js？6327：36警告：道具类型失败：道具children无效提供给Switch，期望一个ReactNode。

我的代码是：

class App extends Component {
  constructor(props) {
      super(props)


}

 routeWithSubRoutes(route) {
  return (
    <Route
      key={_.uniqueId()}
      exact={route.exact || false}
      path={route.path}
      render={props => (
        // Pass the sub-routes down to keep nesting
        <route.component {...props} routes={route.routes || null} />
      )}
    />
  );
 } 

 render () {
  return (
    <div className={styles.App}>
    <Helmet {...config.app} />
    <NavBar />
    <Switch>
      {routes.map(route => this.routeWithSubRoutes.bind(this,route))}
    </Switch>
    </div>
  )
 }



}

export default App;

我尝试修改的代码

export default () => {
  // Use it when sub routes are added to any route it'll work

  const login = () => {

  }

  const routeWithSubRoutes = route => (
    <Route
      key={_.uniqueId()}
      exact={route.exact || false}
      path={route.path}
      render={props => (
        // Pass the sub-routes down to keep nesting
        <route.component {...props} routes={route.routes || null} />
      )}
    />
  );

  var isLogin = false;

  if(!isLogin) {
    return (
      <Login />
    )
  }

  if(isLogin) {
    return (
      <div className={styles.App}>
        <Helmet {...config.app} />
        <NavBar />
        <Switch>
          {routes.map(route => routeWithSubRoutes(route))}
        </Switch>
      </div>
    );
  }


};

此代码正常运行，但我的不是，如何解决此问题？

Answer 1

Function.bind不会调用该函数，它只会绑定其上下文。相反，你应该在构造函数中绑定它：

class App extends Component {
  constructor(props) {
    super(props)

    this.routeWithSubRoutes = this.routeWithSubRoutes.bind(this)
  }

  /* ... */

  render () {
    return (
      <div className={styles.App}>
        <Helmet {...config.app} />
        <NavBar />
        <Switch>
          {routes.map(route => this.routeWithSubRoutes(route))}
        </Switch>
      </div>
    )
  }
}

React router error（Failed prop type：无效的prop`child`提供给`Switch`，期望一个ReactNode。）

1 个答案: