prop oneOf Array oder Standard in React.js

Question

Ich möchte eine Komponente mit Stütze in einem Array oder Standardwert schaffen:

<Component lang="en"/> // this.props.lang == en 
<Component lang="fr"/> // this.props.lang == fr 

Meine Komponente Nachricht eine nette Warnung auf Italienisch so <Component lang="it"/> Anzeige noch nicht übersetzt :

Warning: Failed prop type: Invalid prop `lang` of value `it` supplied to `Component`, expected one of ["en","fr"]. 

Die Sprache meiner Komponente ist gleich it, und ich möchte en gleich sein. Irgendeine Idee? meine Tests

import React from 'react'; 

const Component = React.createClass({ 
    propTypes: { 
    lang: React.PropTypes.oneOf(['en', 'fr']) 
    }, 
    getDefaultProps() { 
    return { 
     lang: 'en' 
    }; 
    }, 
    render(){ 
    return (
     <h1> 
     lang: {this.props.lang} 
     </h1> 
    ); 
    } 
}); 

export default Component; 

hier:

import assert from 'assert'; 

import React from 'react'; 
import {mount} from 'enzyme'; 

import Component from './Component'; 

describe('<Component />',() => { 
    it('get default prop',() => { 
    const wrapper = mount(<Component />); 
    assert.equal(wrapper.prop('lang'), 'en') // pass 
    }); 
    it('get valid prop',() => { 
    const wrapper = mount(<Component lang="fr"/>); 
    assert.equal(wrapper.prop('lang'), 'fr') // pass 
    }); 
    it('get invalid prop',() => { 
    const wrapper = mount(<Component lang="it"/>); 
    assert.equal(wrapper.prop('lang'), 'en') // fail 
    }); 
}); 

Answer 1

Die Stütze Validierung zur Verfügung gestellt von React ist wirklich für die Fehlersuche in Entwicklung gedacht, nicht für die Produktion.

Für das, was Sie erreichen möchten, sollten Sie eine benutzerdefinierte Hilfsmethode erstellen, um den Wert zu konvertieren, wenn dies nicht erwartet wird.

import React from 'react'; 

const VALID_LANGS = ['en', 'fr']; 

const Component = React.createClass({ 
    propTypes: { 
    lang: React.PropTypes.oneOf(VALID_LANGS) 
    }, 
    getDefaultProps() { 
    return { 
     lang: 'en' 
    }; 
    }, 
    render() { 
    return (
     <h1> 
     lang: {this.getLang()} 
     </h1> 
    ); 
    }, 
    getLang() { 
    return VALID_LANGS.indexOf(this.props.lang) !== -1 ? this.props.lang : VALID_LANGS[0]; 
    } 
}); 

export default Component; 

Sie müssen jedoch Ihren Test aktualisieren, da Sie nicht überprüfen können, ob die Requisite korrekt ist. Stattdessen müssen Sie entweder überprüfen, ob die Ausgabe Ihren Erwartungen entspricht, oder ob eine untergeordnete Komponente mit dem korrekten Propestwert "en" gerendert wird.

Answer 2

hier eine andere Lösung mit staatlichen und getInitialState

import React from 'react'; 

const DEFAULT_LANG = 'en'; 
const LOCALES = { 
    en: {}, 
    fr: {} 
}; 

const Component = React.createClass({ 
    propTypes: { 
    lang: React.PropTypes.oneOf(Object.keys(LOCALES)) 
    }, 
    getInitialState(){ 
    const lang = this.props.lang in LOCALES ? this.props.lang : DEFAULT_LANG; 
    return { 
     lang: lang 
    }; 
    }, 
    getDefaultProps() { 
    return { 
     lang: 'en' 
    }; 
    }, 
    render(){ 
    return (
     <h1> 
     lang: {this.state.lang} 
     </h1> 
    ); 
    } 
}); 

export default Component; 

und meine Tests:

import assert from 'assert'; 

import React from 'react'; 
import {mount} from 'enzyme'; 

import Component from './Component'; 

describe('<Component />',() => { 
    it('get default prop',() => { 
    const wrapper = mount(<Component />); 
    assert.equal(wrapper.state('lang'), 'en') 
    }); 
    it('get valid prop',() => { 
    const wrapper = mount(<Component lang="fr"/>); 
    assert.equal(wrapper.state('lang'), 'fr') 
    }); 
    it('get invalid prop',() => { 
    const wrapper = mount(<Component lang="it"/>); 
    assert.equal(wrapper.state('lang'), 'en') 
    }); 
});