flexbox-react icon indicating copy to clipboard operation
flexbox-react copied to clipboard

TypeScript with render props

Open terrierscript opened this issue 6 years ago • 2 comments

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 avatar Jul 07 '18 02:07 terrierscript

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

terrierscript avatar Jul 07 '18 02:07 terrierscript

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

terrierscript avatar Jul 07 '18 02:07 terrierscript