ReactJS: Nesneler için daha fazla modüler pervane çeşitleri ve şekilleri nasıl kullanabilirim?

Question

Her sınıf için tüm prop türleriimi açıkça belirtmeyi seviyorum.

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

Bu yeniden kullanılabilir bileşenler okumaktan geçerli: https://facebook.github.io/react/docs/reusable-components.html

Ancak, ne ben birçok sınıflarında kullanmak çok yaygın bir nesne varsa? Örneğin: Burada

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

, ben yanı sıra bazı başlatımlar olmak üzere çeşitli sınıflar için prop tiplerinde çok sık 'hafıza' şeklini kullanacak. Bunu nasıl daha fazla DRY yapabiliriz - yani daha az kod çoğaltma, bu nedenle bu nesne şeklindeki bir değişiklik gelecekte daha sürdürülebilir olacak mı?

Answer 1

Bu işlevselliği açığa çıkaran küçük bir modül yapıyorum. Bu bir CommonJS dünyada böyle bir şey görünecektir: Ben de aynı sorun vardı

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

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

Answer 2

:

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

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

Ve:

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

Sonra böyle bileşenleri kullanan ediyorum ve değerleri ayrı bir ES6 modülüne taşıdım. müşteri kodunuza Sonra

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

: Bu yardımcı olur

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

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

Hope sizin örnekte.