箭头函数不返回 HTML 选项标记答案

【问题标题】：Arrow Function Does Not Return HTML Option Tag箭头函数不返回 HTML 选项标记
【发布时间】：2021-07-29 03:37:55
【问题描述】：

我在 javascript 中编写了一个箭头函数，用于检查特定的 itemId，然后输出相应的 HTML 选项标记。但是，由于某些原因，即使设置 else 语句作为默认返回语句，条件语句也不会执行。

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>，只有一个<option>，这似乎违背了目的
为什么在 React jsx 中需要箭头函数？
@CertainPerformance 表示条件语句。每个
@Goran.it 每个是下拉列表的一部分。还有什么其他方法可以使用条件语句在下拉列表中显示某些
简单的条件标签，如：{someVariable ? <Comp1 /> : <Comp2 />} 或使用 babel jsx 控制语句，更多内容在这里：npmjs.com/package/babel-plugin-jsx-control-statements

标签： javascript html reactjs arrow-functions

【解决方案1】：

你定义了函数，但也从未调用它。

    <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>

注意函数周围的括号，以及另外一对调用它。

更新：如果要返回多个元素，则必须将节点包装在 Fragment 中：

          ...
          if (itemId === "60e3a111557dc20017253d84") {
            return (
              <>
                <option> July 28, 2021 </option>              //html tag <option>
                <option> July 29, 2021 </option>
              </>
          );
          ...

【讨论】：

如果每个条件语句都有多个选项，似乎我们需要创建一个数组？我收到错误“JSX 表达式必须有一个父元素”。