箭头函数没有 Return HTML 选项标记

Question

我在 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 选项标签？

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

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

更新：如果你想要 return 多个元素，你必须将节点包裹在 Fragment:

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

箭头函数没有 Return HTML 选项标记

Arrow Function Does Not Return HTML Option Tag

javascript

html

reactjs

arrow-functions