ReactJS: Wie kann ich Requisiten und Formen für Objekte modularer verwenden?

Question

Ich möchte explizit alle meine Requisiten für jede Klasse angeben.

React.createClass({ 
    propTypes: { 
    optionalArray: React.PropTypes.array, 
    optionalBool: React.PropTypes.bool, 
... 

Dies ist aus der Lektüre wieder verwendbare Komponenten: https://facebook.github.io/react/docs/reusable-components.html

Was aber, wenn ich eine sehr häufige Aufgabe, die ich in vielen Klassen verwenden? Zum Beispiel:

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; 
    } 
    //... 

Hier verwende ich die ‚Gedächtnis‘ Form sehr häufig in dem prop-Typ für verschiedene Klassen, sowie in einigen Initialisierungen. Wie kann man dies DRYer machen - d. H. Weniger Code-Duplikation, so dass eine Änderung dieser Objektform in der Zukunft besser zu warten ist?

Answer 1

Ich würde ein kleines Modul machen, das diese Funktionalität freilegt. Es wäre so etwas wie dies in einer Commonjs Welt aussehen:

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: "" 
    }; 
    } 
} 

Dann würden Sie, dass in Komponenten wie diese:

let memoryUtils = require('./memory-utils'); 

let MyComponent = React.createClass({ 
    propTypes: memoryUtils.propTypes(), 
    render() { 
    ... 
    } 
}); 

Und:

let memoryUtils = require('./memory-utils'); 

let MyComponent = React.createClass({ 
    getInitialState() { 
    return memoryUtils.initialValues(); 
    }, 
    render() { 
    ... 
    } 
}); 

Answer 2

Ich hatte das gleiche Problem und hat die Werte einfach auf ein separates ES6-Modul verschoben. In Ihrem Beispiel:

// 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 

Dann in Ihrem Client-Code:

// MemoryForm.jsx 
import { MemoryPropTypes } from './lib/PropTypeValues' 
import React from 'react'; 

class MemoryForm extends React.Component { 
    static propTypes: { 
    memory: MemoryPropTypes, 
    // ... 
    }; 
} 

Hoffnung, das hilft.