I like to explicitly specify all my prop types for every class.
React.createClass({
propTypes: {
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
...
This is from reading reusable components: https://facebook.github.io/react/docs/reusable-components.html
However, what if I have a very common object that I use in many classes? For example:
var MemoryForm = React.createClass({
propTypes: {
memory: React.PropTypes.shape({
memoryID: React.PropTypes.number,
content: React.PropTypes.string,
date: React.PropTypes.object,
dateStr: React.PropTypes.string,
note: React.PropTypes.string
}).isRequired,
...
var MemoriesArea = React.createClass({
propTypes: {
// The initial memory to fill the memory form with.
formMemory: React.PropTypes.shape({ // <== shape used again
memoryID: React.PropTypes.number,
content: React.PropTypes.string,
date: React.PropTypes.object,
dateStr: React.PropTypes.string,
note: React.PropTypes.string
}).isRequired,
// ...
var Playground = React.createClass({
getInitialState: function() {
var initVars = {
// The initial memory to fill the memory form with.
formMemory: { // <== shape is used again.
memoryID: 0,
content: "",
date: null,
dateStr: "",
note: ""
}
};
return initVars;
}
//...
Here, I use the 'memory' shape very frequently in the prop types for various classes, as well as in some initializations. How can make this more DRY - i.e., less code duplication, so a change to this object shape will be more maintainable in the future?
I had the same problem and just moved the values to a separate ES6 module. In your example:
// File lib/PropTypeValues.js
import { PropTypes } from 'react';
export let MemoryPropTypes = PropTypes.shape({
memoryID: PropTypes.number,
content: PropTypes.string,
date: PropTypes.object,
dateStr: PropTypes.string,
note: PropTypes.string
}).isRequired
Then in your client code:
// MemoryForm.jsx
import { MemoryPropTypes } from './lib/PropTypeValues'
import React from 'react';
class MemoryForm extends React.Component {
static propTypes: {
memory: MemoryPropTypes,
// ...
};
}
Hope this helps.
I would make a small module exposing that functionality. It would look something like this in a CommonJS world:
let React = require('react');
module.exports = {
propTypes() {
return React.PropTypes.shape({
memoryID: React.PropTypes.number,
content: React.PropTypes.string,
date: React.PropTypes.object,
dateStr: React.PropTypes.string,
note: React.PropTypes.string
}).isRequired;
},
initialValues() {
return {
memoryID: 0,
content: "",
date: null,
dateStr: "",
note: ""
};
}
}
Then you'd use that in components like this:
let memoryUtils = require('./memory-utils');
let MyComponent = React.createClass({
propTypes: memoryUtils.propTypes(),
render() {
...
}
});
And:
let memoryUtils = require('./memory-utils');
let MyComponent = React.createClass({
getInitialState() {
return memoryUtils.initialValues();
},
render() {
...
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With