ReactJS: Come posso utilizzare in modo più modulare i tipi di puntelli e le forme per gli oggetti?

Question

Mi piace specificare esplicitamente tutti i miei tipi di oggetti di scena per ogni classe.

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

Questo è dalla lettura di componenti riutilizzabili: https://facebook.github.io/react/docs/reusable-components.html

Tuttavia, quello che se ho un oggetto molto comune che uso in molte classi? Ad esempio:

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

Uso qui la forma 'memoria' molto frequentemente nei tipi puntello per varie classi, così come in alcune inizializzazioni. Come può rendere questo più ASCIUTTO, cioè meno duplicazioni di codice, quindi una modifica a questa forma di oggetto sarà più gestibile in futuro?

Answer 1

Farei un piccolo modulo che espone quella funzionalità. Sarebbe simile a questo, in un mondo CommonJS:

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

allora si sarebbe usare che in componenti come questo:

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

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

E:

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

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

Answer 2

Ho avuto lo stesso problema e ho appena spostato i valori su un modulo ES6 separato. Nel tuo esempio:

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

Poi nel codice client:

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

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

Spero che questo aiuti.