箭头函数没有 Return HTML 选项标记
Arrow Function Does Not Return HTML Option Tag
我在 javascript 中写了一个箭头函数,它检查特定的 itemId,然后输出相应的 HTML 选项标签。但是,由于某些原因 none 的条件语句执行,即使 else 语句设置为默认 return 语句。
const handleDTime = (e) => { //this should be fine
delivery_time = e.target.value;
};
<div className="select">
<select onChange={handleDTime} selected={delivery_time} value={delivery_time}>
{() => { //javascript arrow function`
if (itemId === "60e3a111557dc20017253d84") {
return (
<option> July 28, 2021 </option> //html tag <option>`
<option> July 29, 2021 </option>
);
} else if (itemId === "60e3a121557dc20017253d87") {
return (
<option> July 29, 2021 </option>
<option> July 30, 2021 </option>
);
}
else {
<option> July 30, 2021 </option>
<option> July 31, 2021 </option>
}
}}
</select>
</div>
在没有箭头函数的情况下编写上面相同的函数工作正常:
<div className="select">
<select onChange={handleDTime} selected={delivery_time} value={delivery_time}>
<option> Saturday, July 31 </option> //works fine
<option> Sunday, August 1 </option>
</select>
</div>
如何在上面的函数中添加条件语句来显示某个 HTML 选项标签?
您定义了函数,但从未调用它。
<select onChange={handleDTime} selected={delivery_time} value={delivery_time}>
{(() => { //javascript arrow function
if (itemId === "60e3a111557dc20017253d84") {
return (
<option> July 28, 2021 </option> //html tag <option>
);
} else if (itemId === "60e3a121557dc20017253d87") {
return (
<option> July 29, 2021 </option>
);
}
else {
<option> July 30, 2021 </option>
}
})()}
</select>
注意函数周围的方括号,以及调用它的另一对夫妇。
更新:如果你想要 return 多个元素,你必须将节点包裹在 Fragment:
...
if (itemId === "60e3a111557dc20017253d84") {
return (
<>
<option> July 28, 2021 </option> //html tag <option>
<option> July 29, 2021 </option>
</>
);
...
我在 javascript 中写了一个箭头函数,它检查特定的 itemId,然后输出相应的 HTML 选项标签。但是,由于某些原因 none 的条件语句执行,即使 else 语句设置为默认 return 语句。
const handleDTime = (e) => { //this should be fine
delivery_time = e.target.value;
};
<div className="select">
<select onChange={handleDTime} selected={delivery_time} value={delivery_time}>
{() => { //javascript arrow function`
if (itemId === "60e3a111557dc20017253d84") {
return (
<option> July 28, 2021 </option> //html tag <option>`
<option> July 29, 2021 </option>
);
} else if (itemId === "60e3a121557dc20017253d87") {
return (
<option> July 29, 2021 </option>
<option> July 30, 2021 </option>
);
}
else {
<option> July 30, 2021 </option>
<option> July 31, 2021 </option>
}
}}
</select>
</div>
在没有箭头函数的情况下编写上面相同的函数工作正常:
<div className="select">
<select onChange={handleDTime} selected={delivery_time} value={delivery_time}>
<option> Saturday, July 31 </option> //works fine
<option> Sunday, August 1 </option>
</select>
</div>
如何在上面的函数中添加条件语句来显示某个 HTML 选项标签?
您定义了函数,但从未调用它。
<select onChange={handleDTime} selected={delivery_time} value={delivery_time}>
{(() => { //javascript arrow function
if (itemId === "60e3a111557dc20017253d84") {
return (
<option> July 28, 2021 </option> //html tag <option>
);
} else if (itemId === "60e3a121557dc20017253d87") {
return (
<option> July 29, 2021 </option>
);
}
else {
<option> July 30, 2021 </option>
}
})()}
</select>
注意函数周围的方括号,以及调用它的另一对夫妇。
更新:如果你想要 return 多个元素,你必须将节点包裹在 Fragment:
...
if (itemId === "60e3a111557dc20017253d84") {
return (
<>
<option> July 28, 2021 </option> //html tag <option>
<option> July 29, 2021 </option>
</>
);
...