箭头函数不返回 HTML 选项标签

如何解决箭头函数不返回 HTML 选项标签

我在 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 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>
              </>
          );
          ...