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

TypeScript with render props  #54

@terrierscript

Description

@terrierscript

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'.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions