Skip to content
This repository has been archived by the owner on Nov 10, 2020. It is now read-only.

TypeScript with render props #54

Open
terrierscript opened this issue Jul 7, 2018 · 2 comments
Open

TypeScript with render props #54

terrierscript opened this issue Jul 7, 2018 · 2 comments

Comments

@terrierscript
Copy link

Thank you for good product.
I found TypeScript bug when use render props


This is OK

import * as React from "react"
// import Flexbox from "flexbox-react"

// mock
const Flexbox = ({ children }) => <div>{children}</div>
class RenderPropsExample extends React.Component<{
  children: (props: any) => React.ReactNode
}> {
  render() {
    return this.props.children({ value: "hello" })
  }
}

const App = () => {
  return (
    <Flexbox>
      <RenderPropsExample>{(value) => <div>(value)</div>}</RenderPropsExample>
    </Flexbox>
  )
}

and when I import Flexbox

import * as React from "react"
import Flexbox from "flexbox-react"

class RenderPropsExample extends React.Component<{
  children: (props: any) => React.ReactNode
}> {
  render() {
    return this.props.children({ value: "hello" })
  }
}

const App = () => {
  return (
    <Flexbox>
      <RenderPropsExample>{(value) => <div>(value)</div>}</RenderPropsExample>
    </Flexbox>
  )
}

Got error.

[ts]
JSX element type 'RenderPropsExample' is not a constructor function for JSX elements.
  Types of property 'render' are incompatible.
    Type '() => ReactNode' is not assignable to type '{ (): ReactNode; (): false | Element; }'.
      Type 'ReactNode' is not assignable to type 'false | Element'.
        Type 'string' is not assignable to type 'false | Element'.
@terrierscript
Copy link
Author

It's seems occure @types/react' s version, I try replace "@types/react": "^16.4.6",, this error is resolved.

@terrierscript
Copy link
Author

and this may fixed when merge #46.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant