私は配列に小道具を持つコンポーネントを作成するか、デフォルト値を使用したいReact.js

Question

で

をoneOfの配列やデフォルトを支える：

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

私のコンポーネントは、まだイタリアそう<Component lang="it"/>表示素敵な警告メッセージに翻訳されていません：私のコンポーネントの

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

言語はitに等しく、私はenに等しくなるようにしたいです。 ここで

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; 

私のテスト：

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

小道具検証リアクトによって提供さは本当にない生産のために、開発中のデバッグのために意図されます。

あなたが達成しようとしていることについては、あなたが期待しているものでない場合に値を変換するカスタムヘルパーメソッドを構築する必要があります。

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; 

小道具が正しいかどうかを確認することはできませんので、テストを更新する必要があります。代わりに、出力が期待どおりに一致するか、子コンポーネントが正しい "en"プロポーズ値でレンダリングされるかをチェックする必要があります。

Answer 2

ここで状態と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; 

と私のテストで別の解決策：

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') 
    }); 
});