我正在學習 React，我決定創建一份動態簡歷。我目前有標簽“en”和“pl”來選擇語言。我有一個物件，其中包含我所有的兩種語言的作業（后面有更多內容）。我的主要目標是將作業保留為 js 物件，以便我可以過濾結果并動態更新串列。
顯示代碼片段
const languageOption = {
en: [{
name: "Company X",
position: "Programmer",
date: "Aug 2022 - Present",
skills: ["eating", "sleeping", "programming"]
},
{
name: "Company Y",
position: "IT Manager",
date: "Jan 2022 - Jul 2022",
skills: [
"playing games",
'saying "Have you tried turning it off and on again?"'
]
},
{
name: "Company Z",
position: "Marketing Manager",
date: "Jan 2021 - Dec 2021",
skills: [
"leading a team",
"creating content",
"eating free samples",
"having fun"
]
}
],
pl: [{
name: "Firma X",
position: "Programista",
date: "Sie 2022 - Obecna",
skills: ["jedzenie", "spanie", "programowanie"]
},
{
name: "Firma Y",
position: "Kierownik IT",
date: "Sty 2022 - Lip 2022",
skills: [
"granie w gry",
'mówienie "Czy spróbowa?e? wy??czy? i w??czy? ponownie?"'
]
},
{
name: "Firma Z",
position: "Manager Marketingu",
date: "Sty 2021 - Gru 2021",
skills: [
"prowadzenie zespo?u",
"tworzenie tre?ci",
"jedzenie darmowych sampli",
"bawienie si? dobrze"
]
}
]
};我想用作業資料填充下面的 div 容器，并為每個作業創建一個新容器。（下面的代碼來自我有多個作業之前。我試圖在添加多個作業之前先讓翻譯作業。
顯示代碼片段
export function JobCardEN({ data }) {
const skillsListen = data.en.skills.map((skill) => <li>{skill}</li>);
return (
<div className="job-card">
<div className="job-card-title">
<h1>{data.en.name}</h1>
<p>{data.en.date}</p>
</div>
<div className="job-card-content">
<ul>{skillsListen}</ul>
</div>
</div>
);
}如何將所有作業呈現為可以過濾和更改的單個容器？
uj5u.com熱心網友回復：
您是否嘗試過使用.map() 來渲染 jsx
export function JobCardEN({ data }) {
return (
<div className="job-card">
{languageOption.en.map((item, i) =>
<div key={i} className="job-card-title">
<h1>{item.name}</h1>
<p>{item.date}</p>
{item.skills.map((item, i) =>
// something like this
}
</div> )}
</div>
);
uj5u.com熱心網友回復：
先取一個這樣的狀態
const [lang, setLang] = useState('en')
我說的是默認值en。
現在映射資料
languageOption[lang].map((data)=>{
return (
<div className="job-card">
<div className="job-card-title">
<h1>{data.name}</h1>
<p>{data.date}</p>
</div>
</div>
})
現在假設您想用 pl 語言顯示所有作業。現在只需創建一個按鈕并將狀態更改為pl。
<button onClick={()=>setLang('pl')}>
Change language </button>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/497507.html
標籤：javascript 反应
上一篇：react如何處理復雜的狀態
下一篇：無法阻止頁面重繪