[英]React PropTypes - OneOf list of objects
我有以下數組:
export const VALID_LANGUAGES = [
{ label: "English", value: "en" },
{ label: "French", value: "fr" },
{ label: "Italian", value: "it" },
{ label: "Portuguese", value: "pt" },
{ label: "Spanish", value: "sp" },
];
而且我想確保組件作為道具“語言”接收這些值之一。 我該怎么做?
MyComponent.propTypes = {
language: PropTypes.oneOf(VALID_LANGUAGES).isRequired, // Doesn't work :(
};
我認為您只需要將 map 數組添加到有效語言條目的列表中。 label
屬性似乎是您想要的值。
language: PropTypes.oneOf(VALID_LANGUAGES.map(({ label }) => label).isRequired
如果您想要語言代碼,只需 map 值。
language: PropTypes.oneOf(VALID_LANGUAGES.map(({ value }) => value).isRequired
實際上,我只是測試了您的原始代碼,它也可以工作。 每個值都經過驗證,直到最后一個選項“Klingon”無效,並且記錄了 proptypes 錯誤。 這是一個codeandbox演示:
const VALID_LANGUAGES = [
{ label: "English", value: "en" },
{ label: "French", value: "fr" },
{ label: "Italian", value: "it" },
{ label: "Portuguese", value: "pt" },
{ label: "Spanish", value: "sp" }
];
const MyComponent = ({ language }) => <div>Language: {language.label}</div>;
MyComponent.propTypes = {
language: PropTypes.oneOf(VALID_LANGUAGES).isRequired
};
export default function App() {
const [language, setLanguage] = React.useState(0);
return (
<div className="App">
<select onChange={(e) => setLanguage(e.target.value)} value={language}>
<option value={-1} disabled>
Select a Language
</option>
{VALID_LANGUAGES.map((language, index) => (
<option key={language.value} value={index}>
{language.label}
</option>
))}
<option value={-1}>Klingon</option>
</select>
<MyComponent language={VALID_LANGUAGES[language]} />
</div>
);
}
也許你可以澄清你的代碼是什么和/或如何不工作的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.