Ошибка: сбойный тип пропуска: недопустимое свойство `children` передано в` CSSTransition` - PullRequest
Новая
       27

Ошибка: сбойный тип пропуска: недопустимое свойство `children` передано в` CSSTransition`

0 голосов
/ 11 июля 2020

Может ли кто-нибудь помочь мне решить эту проблему с помощью React CSSTransition? Ошибка в консоли говорит:

Ошибка: Неудачный тип опоры: Недопустимая опора children передана в CSSTransition.

Мой код находится в компоненте приложения, возвращая следующее: I ' Мы создали соответствующий компонент поиска и необходимые CSS классы.

Спасибо! 

  return (
    <StateContext.Provider value={{ state }}>
      <DispatchContext.Provider value={{ dispatch }}>
        <BrowserRouter>
          <Header />
          <Switch>
            <Route path="/" exact>
              {state.loggedIn ? <Welcome /> : <Content />}
            </Route>
            <Route path="/post/:id" exact><SinglePost/></Route>
            <Route path='/post/:id/edit'><EditPost/></Route>
            <Route path="/create-post">
              <CreatePost />
            </Route>
            <Route path="/about-us" exact>
              <About />
            </Route>
            <Route path="/terms" exact>
              <Terms />
            </Route>
            <Route path='/profile/:username'><Profile/></Route>
            <Route><Error/></Route>   
          </Switch>
          <CSSTransition timeout={330} in={state.isSearchOpen} classNames='search-overlay' unmountOnExit> <Search/></CSSTransition>
          <Footer />
        </BrowserRouter>
      </DispatchContext.Provider>
    </StateContext.Provider>
  )
}

// ----------------------------- Search Component:

  return ( 
<div class="search-overlay">
      <div className="search-overlay-top shadow-sm">
        <div className="container container--narrow">
          <label htmlFor="live-search-field" className="search-overlay-icon">
            <i className="fas fa-search"></i>
          </label>
          <input autoFocus type="text" autoComplete="off" id="live-search-field" className="live-search-field" placeholder="What are you interested in?" />
          <span className="close-live-search">
            <i className="fas fa-times-circle"></i>
          </span>
        </div>
      </div>
</div>
)
...