javascript - TypeScript - Type 'Element' is not assignable to type 'ReactChildren' - Stack Overf

admin管理员组

文章数量:1344422

I'm stuck and have no idea how to tackle this error anymore.

Here is code of my App ponent

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

Errors I'm getting (same error happens in two ponents - Layout and Router):

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

Code of Layout ponent:

interface Props {
    children: React.ReactChildren
}

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

When I added ts-ignore above Layout ponent different errors seems to bubble up to the Root ponent

Type '{ children: (string | Element)[]; }' is not assignable to type 'Props'.
  Types of property 'children' are inpatible.
    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}>

Code of Root ponent:

interface Props {
    children: React.ReactChildren
}

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

No idea why Element type is being returned at some point there. Any hint would be appreciated.

I'm stuck and have no idea how to tackle this error anymore.

Here is code of my App ponent

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

Errors I'm getting (same error happens in two ponents - Layout and Router):

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

Code of Layout ponent:

interface Props {
    children: React.ReactChildren
}

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

When I added ts-ignore above Layout ponent different errors seems to bubble up to the Root ponent

Type '{ children: (string | Element)[]; }' is not assignable to type 'Props'.
  Types of property 'children' are inpatible.
    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}>

Code of Root ponent:

interface Props {
    children: React.ReactChildren
}

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

No idea why Element type is being returned at some point there. Any hint would be appreciated.

• javascript
• reactjs
• typescript
• react-router

Share Improve this question Follow edited Aug 2, 2020 at 12:26 Mariusz S. asked Aug 2, 2020 at 12:20 Mariusz S.Mariusz S. 9111 gold badge11 silver badge66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

It looks like your Layout children props is supposed to be child or element since you have just only child:

interface Props {
  children: React.ReactChild
}

ReactChild is deprecated. Just use ReactNode

interface Props {
    children: React.ReactNode
}

本文标签： javascriptTypeScriptType 39Element39 is not assignable to type 39ReactChildren39Stack Overflow