React: PropTypes: define children component type

Created on 15 Jul 2014 · 11Comments · Source: facebook/react

I was looking for something like:

propTypes: {
  children: React.PropTypes.instanceOf(OtherComponent)
}

However this doesn't work of course and couldn't find another way of doing this.

Would be nice if this was supported.

Source

SanderSpies

All 11 comments

Used to work. Will no longer work with the upcoming descriptor changes. @sebmarkbage has some ideas.

chenglou on 15 Jul 2014

There are two pieces to this. The simple one is when you are expecting a single component. We should have a special propType for this.

propTypes: {
  header: React.PropTypes.componentOf(OtherComponent)
}

That's simple. Someone send a pull-request?

The second part is if you want to accept one of several unknown components that are considered compatible. In XHP in Hack we use something called categories.

The third part is when you want to combine these two types of checks with a set of items. What if you want to allow a union type? What if you want the first item to be of a certain type and the remaining items another type?

@azich has some ideas around this.

sebmarkbage on 15 Jul 2014

👍1

Another case is if you want to accept any composite that renders to a <td> (for example), not sure if that's covered by XHP categories.

sophiebits on 15 Jul 2014

It would be really cool to be able to verify that the right React component was passed in as a property. The docs are a little confusing, because it looks like you should be validating that the right React Message component is getting passed in:

 // An object that could be one of many types
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

http://facebook.github.io/react/docs/reusable-components.html

stubbornella on 5 Jan 2015

Yea, the current work around is something like: shape({ type: oneOf([MyComponent]) })

I think we need a broader solution than testing for specific types. Usually you want it to correspond to some specific interface but the actual implementation is flexible, or have a certain set of props defined on it.

sebmarkbage on 5 Jan 2015

👀1

Is there any news on that?