支持oneOf数组或React.js中的默认值

Question

I want to create a component with prop in an array or use default value:

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

My component is not yet translated in italian so <Component lang="it"/> display a nice warning message:

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

The language of my component is equal to it , and I want to be equal to en . Any idea ?

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;

Here my 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.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

The prop validation provided by React is really intended for debugging in development, not for production.

For what you're trying to achieve, you should build a custom helper method to convert the value if it's not something you're expecting.

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;

You'll need to update your test though, since you can't check if the prop is correct. Instead, you'll need to either check that the output matches what you expect, or that a child component is rendered with the correct "en" prop value.

Answer 2

Here another solution with state and 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;

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