React.js：如何在JSX中有條件地排序（）和映射（）或僅映射（）-有解無憂

我在下面有這段代碼，因為我兩次使用幾乎相同的代碼，它似乎并不有效。我想讓這段代碼比這更干凈，不僅僅是粘貼和復制。

<div >
{ selected ? (
  dynamicData
    .sort((a, b) => b.count_filtered - a.count_filtered) // Only this part is different
    .map((list, idx) => (
      <div key={list.slug}>
        <label htmlFor={list.slug}>
          {list.name} (<b> {list.count_filtered} </b> / {list.count_all})
        </label>
        <input
          type="checkbox"
          value={list.slug}
          id={list.slug}
          checked={filterList.some(el => el.slug.includes(list.slug))}
        />
      </div>
    ))
) : (
  dynamicData.map((list, idx) => (
    <div key={list.slug}>
      <label htmlFor={list.slug}>
        {list.name} (<b> {list.count_filtered} </b> / {list.count_all})
      </label>
      <input
        type="checkbox"
        value={list.slug}
        id={list.slug}
        checked={filterList.some(el => el.slug.includes(list.slug))}
      />
    </div>
  ))
)}
</div>

如您所見，如果selected是true，則陣列將執行sort()，map()否則，它只會執行map()。

請讓我知道清理此代碼的聰明方法。

uj5u.com熱心網友回復：

根據@MuhammedJaseem所說，我在下面更新了我的代碼，它運行良好。

const repeatCode = (list, onChange) => { // Added
  return (
    <div key={list.slug}>
      <label htmlFor={list.slug}>
        {list.name} (<b> {list.count_filtered} </b> / {list.count_all})
      </label>
      <input
        type="checkbox"
        value={list.slug}
        id={list.slug}
        checked={filterList.some(el => el.slug.includes(list.slug))}
        onChange={e => onChange(e.target.checked, list.slug, dynamicType)} // Added
      />
    </div>
)}

<div >
{ selected ? (
  dynamicData
    .sort((a, b) => b.count_filtered - a.count_filtered) 
    .map((list, idx) => (
      repeatCode(list, handleSelect)
    ))
) : (
  dynamicData.map((list, idx) => (
      repeatCode(list, handleSelect)
  ))
)}
</div>

uj5u.com熱心網友回復：

嘗試這個：

const repeatCode = (
    <div key={list.slug}>
      <label htmlFor={list.slug}>
        {list.name} (<b> {list.count_filtered} </b> / {list.count_all})
      </label>
      <input
        type="checkbox"
        value={list.slug}
        id={list.slug}
        checked={filterList.some(el => el.slug.includes(list.slug))}
      />
    </div>
)

<div >
{ selected ? (
  dynamicData
    .sort((a, b) => b.count_filtered - a.count_filtered) // Only this part is different
    .map((list, idx) => (
      {repeatCode}
    ))
) : (
  dynamicData.map((list, idx) => (
      {repeatCode}
  ))
)}
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/427496.html

標籤：反应排序条件语句映射

上一篇：洗掉相同字符后排序的字串無法正常作業

下一篇：從不同范圍獲取資料的查詢或公式