4

Given the following code using PropTypes (see this issue)

const SomeComponent = ({comp}) => {...}

SomeComponent.propTypes = { 
  comp: PropTypes.shape({
    type: PropTypes.oneOf([SomeOtherComponent])
  })
}

what is the equivalent using Flow types?

I've only gotten as far as:

const SomeComponent = ({comp}: {comp: React$Element<any>}) => {...}

using this for reference, but that will allow comp to be any React component.

How do I type-check a prop to ensure it is an instance of a specific React component using Flow?

Nat Mote
  • 4,068
  • 18
  • 30
Palisand
  • 1,302
  • 1
  • 14
  • 34

2 Answers2

2

Short answer: You can't. React elements are created at runtime, and Flow can only use data which can be obtained through its own static analysis, which is not powerful enough to determine the component class which will be used to create a React element at runtime. This is complicated mostly because the component class used to create an element could be defined only at runtime. Allowing Flow to try to determine the runtime type of an element would inevitably make it run into situations where it would be perfectly valid to use the component you want, but Flow wouldn't allow you.

If you want to check the type of a component prop, do it at runtime as explained in this question. You can disable this kind of check in production by having a global variable indicating "development mode". For instance:

 function elementIsOfType(element, typeName) {
   if (!__DEV__) {
     return true;
   }
   return element.type.displayName === typeName;
 }

You could then set the __DEV__ variable to false to disable all runtime checks.

Community
  • 1
  • 1
Pedro Castilho
  • 10,174
  • 2
  • 28
  • 39
  • I'm going to give this question a few more days before accepting this. The optimist in me wants you to be wrong, but the pessimist in me already knows you aren't. – Palisand May 02 '17 at 19:32
  • I'm hoping you don't have to accept my answer, really. I do think I'm right, though. – Pedro Castilho May 02 '17 at 19:39
0

As of Flow 0.53, this can be done using React.Element<typeof Component>.

Palisand
  • 1,302
  • 1
  • 14
  • 34