我正在嘗試使用 .map 在具有某些內容的陣列上呈現多個組件。雖然我在控制臺中沒有收到任何錯誤，但該組件并未在 DOM 中呈現。我試圖讓 subHeader 無效，但我認為它更多地與 .map 與陣列互動的方式有關。任何見解都會非常有幫助！這是一些示例代碼：
const instructions = [
{
header: 'header 1',
},
{
header: 'header 2',
subHeader: 'subheader 1',
},
];
return (
<div className={classes.header}>
{instructions.map((el) => {
<InstructionRow header={el.header} subHeader={el?.subHeader} />;
})}
<InstructionRow header={'ian'} subHeader={'goodman'} />
</div>
);
uj5u.com熱心網友回復：
您沒有從map(). 大概這可能是一個原因。嘗試使用，
{instructions.map((el) => {
return <InstructionRow header={el.header} subHeader={el?.subHeader}/>;
})}
uj5u.com熱心網友回復：
問題是，您不會從地圖中回傳任何內容。
要么使用它回傳：
return (
<div className={classes.header}>
{instructions.map((el) => {
return (
<InstructionRow header={el.header} subHeader={el?.subHeader} />;
)
})}
<InstructionRow header={'ian'} subHeader={'goodman'} />
</div>
);
...或者你可以寫得更短：
return (
<div className={classes.header}>
{instructions.map((el) => (
<InstructionRow header={el.header} subHeader={el?.subHeader} />;
))}
<InstructionRow header={'ian'} subHeader={'goodman'} />
</div>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/419271.html
標籤：
上一篇：如何動態地使動態型別的屬性可選？
下一篇：根據另一個道具動態設定道具型別