Question: Why `props` prop on jsxstyle components

[rszewczyk]

Why not just pass props that aren't in the style whitelist directly to the inner component?

[rszewczyk]

And just so I'm not asking a question for the heck of it... :-)

I'm finding the props prop to be somewhat annoying in practice. Consider the following example where there's outer and inner View components:

const {
  innerStyleProps,
  ...styleProps
} = this.props

return (
  <View {...styleProps}>
    <View {...innerStyleProps} />
  </View>
)

This works so long as I only want to apply styling props. If I want to apply standard props (event handlers, etc) to the underlying div (or whatever) I have to add a separate prop for that.

const {
  innerProps,
  innerStyleProps,
  ...props
} = this.props

return (
  <View {...props}>
    <View {...innerStyleProps} props={innerProps} />
  </View>
)

I also have to document to the user of this component the props prop so that any standard props end up in the right place.

Really I'd like to just do:

const {
  innerProps,
  ...props
} = this.props

return (
  <View {...props}>
    <View {...innerProps} />
  </View>
)

I can see the value in having a warning to the user if they provide an invalid style (or psuedo selector) prop. But I think that you'll still get that benefit without props since anything that falls through the whitelist will get checked by React's existing prop validation or custom propTypes (if the the underlying component is a custom component).

[threepointone]

So... this already works, though it gives a warning on the console for unrecognized keys. I just cut a build 2.17.7 that removes the warning.

The props prop exists more as an escape hatch when you don't want it to be a style prop. for example - inputs of type checkbox accept both a checked prop, as well as a :checked pseudo class.

Anyway, give 2.17.7 a spin, and tell me if it works?

[rszewczyk]

Ahh... I was trying to think of an example of where a standard prop would clash with a style prop name. For some reason I didn't think of that case.

I'll give this a try in a bit. Thanks!

[rszewczyk]

Works great! Thank you.

[threepointone]

Neat, happy to help!