TypeScript - тип Element нельзя присвоить типу ReactChildren - PullRequest
Новая
       68

TypeScript - тип Element нельзя присвоить типу ReactChildren

1 голос
/ 02 августа 2020

Я застрял и больше не знаю, как решить эту ошибку.

Вот код моего компонента приложения 

const App = () => (
  <Root>
    <Layout>
      <Router history={history}>
        <Navbar />
        <Switch>
          {routingConfig.map((page: RouteElement, idx: number) => {
            const { exact, path, component } = page
            return <Route key={idx} exact={exact} path={path} component={component} />
          }
          )}
        </Switch>
      </Router>
    </Layout>
  </Root>
)

Я получаю ошибки (такая же ошибка возникает в два компонента - макет и маршрутизатор): 

> Type 'Element' is not assignable to type 'ReactChildren |
> (ReactChildren & string) | (ReactChildren & number) | (ReactChildren &
> false) | (ReactChildren & true) | (ReactChildren & ReactElement<...>)
> | (ReactChildren & ReactNodeArray) | (ReactChildren & ReactPortal)'.  
> Type 'Element' is not assignable to type 'ReactChildren &
> ReactPortal'.
>     Type 'Element' is missing the following properties from type 'ReactChildren': map, forEach, count, only, toArray  TS2322
> 
>     14 | const App = () => (
>     15 |   <Root>
>   > 16 |     <Layout>
>        |     ^
>     17 |       <Router history={history}>
>     18 |         <Navbar />
>     19 |         <Switch>


    15 |   <Root>
    16 |     <Layout>
  > 17 |       <Router history={history}>
       |       ^
    18 |         <Navbar />

Код компонента макета: 

interface Props {
    children: React.ReactChildren
}

const Layout: React.FC<Props> = ({ children }) => <div className="layout">{children}</div>

Когда я добавил ts-ignore выше компонента макета, различные ошибки, похоже, всплывают до Root компонент 

Type '{ children: (string | Element)[]; }' is not assignable to type 'Props'.
  Types of property 'children' are incompatible.
    Type '(string | Element)[]' is missing the following properties from type 'ReactChildren': count, only, toArray  TS2322

    13 | 
    14 | const App = () => (
  > 15 |   <Root>
       |    ^
    16 |     //@ts-ignore
    17 |     <Layout>
    18 |       <Router history={history}>

Код Root компонента: 

interface Props {
    children: React.ReactChildren
}

export const Root: React.FC<Props> = ({ children }) => (
    <Provider store={store}>
        {children}
    </Provider>
)

Понятия не имею, почему в какой-то момент возвращается тип элемента. Мы будем благодарны за любые подсказки.

1 Ответ

1 голос
/ 02 августа 2020

Похоже, что ваш Layout дочерний реквизит должен быть дочерним элементом или элементом, поскольку у вас есть только дочерний элемент: 

interface Props {
  children: React.ReactChild
}
...