Javascript React.js中的数组或默认值之一

我要在数组中创建具有道具的组件，或使用默认值：

<Component lang="en"/> // this.props.lang == en
<Component lang="fr"/> // this.props.lang == 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;

从“React”导入React；
const Component=React.createClass({
道具类型：{
React.PropTypes.oneOf（['en'，'fr']）
},
getDefaultProps（）{
返回{
朗：“恩”
};
},
render（）{
返回(
朗：{this.props.lang}
);
}
});
导出默认组件；

以下是我的测试：

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

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

从“assert”导入assert；
从“React”导入React；
从“酶”导入{mount}；
从“./Component”导入组件；
描述（“”，（）=>{
它（'get default prop'，（）=>{
const wrapper=mount（）；
assert.equal（wrapper.prop（'lang'），'en'）//pass
});
它（'get valid prop'，（）=>{
const wrapper=mount（）；
assert.equal（wrapper.prop（'lang'），'fr'）//pass
});
它（'get invalid prop'，（）=>{
const wrapper=mount（）；
assert.equal（wrapper.prop（'lang'），'en'）//失败
});
});

React提供的道具验证实际上是为了在开发中进行调试，而不是为了生产

对于您试图实现的目标，您应该构建一个自定义的helper方法来转换您不期望的值

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;

从“React”导入React；
const VALID_LANGS=['en'，'fr']；
const Component=React.createClass({
道具类型：{
语言：React.PropTypes.oneOf（有效语言）
},
getDefaultProps（）{
返回{
朗：“恩”
};
},
render（）{
返回(
lang:{this.getLang（）}
);
},
getLang（）{
返回有效的_LANGS.indexOf（this.props.lang）！=-1？this.props.lang:VALID_LANGS[0]；
}
});
导出默认组件；

---

不过，您需要更新测试，因为您无法检查道具是否正确。相反，您需要检查输出是否与预期匹配，或者子组件是否使用正确的“en”prop值呈现。

这里是另一个使用state和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;

从“React”导入React；
const DEFAULT_LANG='en'；
常量区域设置={
恩：{}，
fr:{}
};
const Component=React.createClass({
道具类型：{
lang:React.PropTypes.oneOf（Object.keys（LOCALES））
},
getInitialState（）{
const lang=this.props.lang在语言环境中？this.props.lang：默认值\u lang；
返回{
朗：朗
};
},
getDefaultProps（）{
返回{
朗：“恩”
};
},
render（）{
返回(
lang:{this.state.lang}
);
}
});
导出默认组件；

还有我的测试：

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

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

从“assert”导入assert；
从“React”导入React；
从“酶”导入{mount}；
从“./Component”导入组件；
描述（“”，（）=>{
它（'get default prop'，（）=>{
const wrapper=mount（）；
assert.equal（wrapper.state（'lang'），'en'））
});
它（'get valid prop'，（）=>{
const wrapper=mount（）；
assert.equal（wrapper.state（'lang'），'fr'））
});
它（'get invalid prop'，（）=>{
const wrapper=mount（）；
assert.equal（wrapper.state（'lang'），'en'））
});
});

yes

prop validation

在我的浏览器控制台中显示警告非常好。感谢您的建议，我希望API可以像

React.PropTypes.one（VALID\u LANGS，DEFAULT\u LANG）

一样友好，您应该查看keyMirror包，您不必像那样设置假键/值。