渲染<select>和<option>在單獨的組件中

Question

我不完全確定當select和option一起使用時引用是如何工作的，但是將它們分成單獨的 React 組件會導致它們不起作用。 我怎樣才能讓它發揮作用？

基本示例：

<select>
    {() => (
        <React.Fragment>
            <option>I do not render</option>
            <option>I not render as well</option>
        </React.Fragment>
    )}
</select>

React.Fragment是強制性的，因為組件只能渲染一個實體。 我正在考慮/玩弄React.createRef ，但最終我不知道事情是如何運作的。

代碼沙箱： https : //codesandbox.io/s/quirky-thompson-s452i

Answer 1

這背后的原因是因為您在技術上只是創建了一個箭頭函數：

() => (
   <React.Fragment>
      <option>I do not render</option>
      <option>I not render as well</option>
   </React.Fragment>
) 

所以在下面你也調用了定義的函數。

如果您像下面這樣更改它，它將呈現選項：

<select>
     {
         (() =>
            <React.Fragment>
               <option>I do not render</option>
               <option>I not render as well</option>
            </React.Fragment>
         )()
     }
</select>

第二種技術稱為IIFE ，如文檔所述：

IIFE（立即調用函數表達式）是一個 JavaScript 函數，它在定義后立即運行。

在此處進一步閱讀： https : //developer.mozilla.org/en-US/docs/Glossary/IIFE

代碼沙箱：

請在此處找到： https : //codesandbox.io/s/mystifying-bas-p4ik9

我希望這有幫助！