我想在数组中使用prop创建一个组件或使用默认值:
<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
});
});
答案 0 :(得分:3)
React提供的prop验证实际上是用于开发中的调试,而不是用于生产。
对于您要实现的目标,您应该构建一个自定义帮助方法来转换该值,如果它不是您期望的那样。
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”prop值渲染子组件。
答案 1 :(得分:0)
这是另一个使用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;
和我的测试:
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')
});
});