通過 function 為多個項目生成 react.fragment

Question

在我清理大量 React 渲染語句的過程中，我一直在將一些東西分解成輔助函數。 這是我在助手 function 中的一部分：

// This looks ugly
return (
  <>
    {label}
    {getDropdown(
      daysOfWeek,
      handleDaysOfWeekChange,
      daysOfWeekLabel,
      options.dayOfWeek,
      isMultiSelectEnabled
    )}
  </>
);

getDropdown function 的細節無關緊要。 Label 是一個反應組件（並且被定義為一個變量，因為它也在其他地方使用），並且 getDropdown 返回一個反應組件。

出於某種原因，這對我來說看起來很丑陋，我們從一個 react.fragment 開始，這樣我們就可以有多個 javascript 代碼片段，但反過來每個 javascript 片段要么是一個等於反應組件的變量，要么是一個 function 計算在反應組件的運行時。 所以我們真的是從反應范式到 javascript 范式，然后再回到反應范式。

我想要這樣的東西，它全是 javascript 范例：

// invalid code!
return React.fillFragment(
  label,
  getDropdown(
    daysOfMonth,
    handleDaysOfMonthChange,
    daysOfMonthLabel,
    options.dayOfMonth,
    isMultiSelectEnabled
  ),
);

返回一個數組只會給出關鍵錯誤，我們不想重載它，因為在其他地方我們想要返回一個沒有片段的數組。

我能想到的下一個最佳解決方案是將這兩個簡單地視為實際組件，這將是 all react 范例：

// Works, but still feels verbose
return (
  <>
    <Label/>
    <GetDropDown
      value={daysOfMonth}
      onChange={handleDaysOfMonthChange}
      defaultLabel={daysOfMonthLabel}
      listOptions={options.dayOfMonth}
      isMultiSelect={isMultiSelectEnabled}
    />
  </>
);

這確實有效，但感覺有點矯枉過正，而且對於一對一次性使用的函數來說並不是最簡潔的。 （例如 label 僅在此處和其他地方使用。）

我想知道是否內置了一些我無法找到的東西，或者這里是否有我從未遇到過的小技巧？ 或者也許我太挑剔了

Answer 1

你最后的片段對我來說最好看。

如果getDropdown返回一個 React 組件，那么它最好是一個 React 組件。

如果你不喜歡<></>片段語法，你可以用<Fragment></Fragment>代替。

如果您根本不需要片段，則必須將組件Label和GetDropDown內聯到它們的父組件中。 或者將Label放入GetDropDown （ GetDropDown改名為Dropdown ）。

我不知道GetDropDown和Label的內容，但是如果除了select和label中沒有其他內容，您可能不想創建 React 組件。

如果您將自定義樣式應用於label和select元素，您可以添加全局樣式表，或者 - 首選解決方案 - 使用 css-in-js 庫，如styled-components ：

// Label is a component, with the custom style you define here.
const Label = styled.label`
  color: grey;
`;

添加這樣的小組件，性能成本可以忽略不計。