ReactJS propTypes composition

component.jsx

class Component1 extends React.Component {
  static propTypes = {
    some: React.PropTypes.bool,
    prop: React.PropTypes.string,
    types: React.PropTypes.object,
  }
}

class Component2 extends React.Component {
  static propTypes = {
    additional: React.PropTypes.object.isRequired,
    some: React.PropTypes.bool,
    prop: React.PropTypes.string,
    types: React.PropTypes.object,
  }
  
  render() {
    let { additional, ...other } = this.props
    return (
      <Component1 {...other} />
    )
  }
}

It looks like this saves you one hop when passing props into deeper children but you still need to define all props on both components, so when you add something_else to InlineEdit you also need to change code in Project? That's exactly what I want to avoid.

Prop distribution hell is one of the things that Redux addresses. Pre-Redux, your root component needed all the data, and then each subsequent component level needed some subset of the data. With leaf nodes (or nodes closer to the leaves) being able to connect() to the data using Redux, a lot of that complexity is reduced.

However, you have Component1's propTypes statically available to you, so why not something like this?

class Component2 extends React.Component {
  static propTypes = {
    ...Component1.propTypes,  // <------------------ :-)
    additional: React.PropTypes.object.isRequired
  }

  render() {
    let { additional, ...other } = this.props
    return (
      <Component1 {...other} />
    )
  }
}

@erikras see, I'm still a JS syntax noob! That thing with the ...Component1.propTypes is EXACTLY what I was hoping for! This is perfect, thank you so much!

And I agree that Redux helps with propTypes-hell, just in my special usecase, I'm dealing with props that don't make sense to be stored in a reducer, so that's why I was asking.