flexbox-react
flexbox-react copied to clipboard
TypeScript with render props
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'.
It's seems occure @types/react
' s version, I try replace "@types/react": "^16.4.6",
, this error is resolved.
and this may fixed when merge https://github.com/nachoaIvarez/flexbox-react/pull/46.