Repeating js and PropTypes repeats through common components

Question

I created some responsive components and as such, the parent ... gets a few details ...

Each subsequent child uses most of these details, then the children of the children.

**--> Parent** (required props) **-------> child** (required props) **-------> child** (required props) **------------> sub child** (required props) **------------> sub child** 

These "requisites" are the same for all of these components. It seems redundant that whenever I update the support in Parental, I have to go into all these children and update (if necessary). Of course, they are necessary and necessary, but it is curious whether there is a shortcut / or implementation that this repetition is not required. Any ideas?

thanks

Answer 1

You can store your prop types in an object that you combine into each propTypes component:

 var requiredPropTypes = { foo: ..., bar: ... }; var ComponentA = React.createClass({ propTypes: { ...requiredPropTypes, // ComponentA prop types follow // ... }, // ... }); var ComponentB = React.createClass({ propTypes: { ...requiredPropTypes, // ComponentB prop types follow // ... }, // ... }); 

---

The value of propTypes is just an object. How you build this object is completely up to you.

Answer 2

It is pretty simple. If you wrote es6 code, you can use the form of the component that you import

 import React, { PropTypes } from 'react'; import { Button } from 'components'; const NewComponent = (props) => { return ( {props.buttons.map((button) => <div> <Button {...props} /> </div> )} ); } NewComponent.propTypes = { buttons: PropTypes.arrayOf(PropTypes.shape({ Button }.propTypes)) }; 

Answer 3

The distribution operator can be convenient:

 import OtherComponent from './OtherComponent'; const MyComponent = ({ foo }) => (<OtherComponent {...foo} />); MyComponent.propTypes = { foo: PropTypes.shape({ ...OtherComponent.propTypes }), }; export default MyComponent;