我想將回圈的結果（consol.log 中的內容）作為選項添加到選擇標記中。
function CustomeSelect(props) {
const values = props.values;
for (const entry of values) {
console.log(`<option value=${entry[0]}>${entry[1]}</option>`)
}
return (
<div>
<label for={props.for}>{props.title}</label>
<select value={props.value} onChange={props.onChange} id={props.id}>
// Here I want to add `<option value=${entry[0]}>${entry[1]}</option> - what is in console.log.
</select>
</div>
);
}
uj5u.com熱心網友回復：
您可以使用Array.prototype.map回圈values屬性并為每個專案回傳一個像這樣的選項標簽
function CustomeSelect(props) {
const { values } = props;
return (<div>
<label for={props.for}>{props.title}</label>
<select value={props.value} onChange={props.onChange} id={props.id}>
// Here I want to add `${entry[1]} - what is in console.log.
{Array.from(values).map(entry => {
return <option value={entry[0]}>{entry[1]}</option>
})}
</select>
</div>);
}
uj5u.com熱心網友回復：
這樣它就可以作業，
function CustomeSelect(props) {
return (
<div>
<label for={props.for}>{props.title}</label>
<select onChange={props.onChange} id={props.id}>
{props.values.map(
entry => return <option key={Math.random()} value={entry[0]}>${entry[1]}</option>
)}
</select>
</div>
);
}
uj5u.com熱心網友回復：
您可以使用如下所示的地圖方法。請記住values.map將遍歷陣列并給出單獨的值。
function CustomeSelect(props) {
const values = props.values;
// assume const values = [ "one", "two", "three" ]
return (
<div>
<label for={props.for}>{props.title}</label>
<select value={props.value} onChange={props.onChange} id={props.id}>
{
values.map((val , index) => (
<option key={index} value={val}>{val}</option>
))
}
</select>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/432759.html