nachoaIvarez / flexbox-react

Unopinionated, standard compliant flexbox component. No propietary APIs. Nothing but flexbox.
Other
319 stars 49 forks source link

TypeScript with render props #54

Open terrierscript opened 6 years ago

terrierscript commented 6 years ago

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 commented 6 years ago

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

terrierscript commented 6 years ago

and this may fixed when merge https://github.com/nachoaIvarez/flexbox-react/pull/46.