我有一個像這樣的物件 :
{
comment。"autogenerated"。
createdDate: "2021-09-21T14:32:47"
id: 7831 id.
lastModifiedDate: "2021-09-21T14:32:47"
media: "LETTER"
}
知道media可以回傳不同的值，比如。"LETTER", "PHONE" "EMAIL"。
我希望我的翻譯能夠根據media回傳的值而改變
const renderMedia = （media: string）=> {
return (
<>
{t(`press.text`, {
media: presentMedia(media),
})}
</>
);
};
presentMedia()函式根據media回傳的值，回傳一個翻譯。
const presentMedia=（media: string） => {
switch (media) {
case 'PHONE'/span>:
return <span> t('press. media.phone')</span>t('press;
case 'LETTER'/span>:
return <span> {t('press. media.letter')}</span>。
case 'EMAIL'/span>:
return <span> t('press. media.email')</span>t('press;
}
};
i18n檔案 :
"press"/span>: {
"text": " files {{media}}",
"媒體": {
"phone": "通過電話"。
"信件": "bu letter"。
"email": "bu email"。
},
另一方面，函式presentMedia回傳[object, Object]，而我想恢復存在于switch
如果我把<span>{t('press.media.letter')}</span>替換成一個簡單的字串<span>test</span>，就會顯示出來
在一個函式中使用i18n React是否有問題？
可能有其他的解決方案會給我同樣的結果嗎？
uj5u.com熱心網友回復：
在這里你有一個CodeSanbox的例子。https://codesandbox.io/s/cranky-allen-oujoc?file=/src/App.js
這個錯誤是。presetMedia正在回傳一個[object Object]，因為你也在回傳<span>。所以，它是一個React節點（或[objectObject]）
我建議更改：
const presentMedia = （media: string）=> {
switch (media) {
case 'PHONE'/span>:
return <span> {t('press. media.phone')}</span>。
case 'LETTER'/span>:
return <span> {t('press. media.letter')}</span>。
case 'EMAIL'/span>:
return <span> {t('press. media.email')}</span>。
}
};
到此：
const presentMedia =（media: string）=> {
switch (media) {
case 'PHONE'/span>:
return t（'press.media.phone'）。
case 'LETTER':
return t（'press.media.letter'）。
case 'EMAIL':
return t（'press.media.email'）。
}
};
最后，如果能成功，我建議改成這樣：
const presentMedia = （media: string) => t(`press. media.${media.toLowerCase()`）。)
uj5u.com熱心網友回復：
這些情況是不一樣的，其中2個缺少{}。修復它們，看看問題是否得到解決。如果沒有，請向我們提供t的代碼。
case 'PHONE':
return <span>t('press. media.phone')</span>t('press;
case 'LETTER'/span>:
return <span> {t('press. media.letter')}</span>。
case 'EMAIL'/span>:
return <span> t('press. media.email')</span>t('press;
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/334282.html
標籤：