React.js：如何在 JSX 中有条件地排序（）和 map（）或仅 map（）

Question

我有下面的这段代码，它似乎没有效果，因为我使用了两次几乎相同的代码。我想通过不只是粘贴和复制来使这段代码比这更清晰。

<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() .

请告诉我清理这段代码的巧妙方法。

Answer 1

试试这个：

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>

Answer 2

根据@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>

React.js：如何在 JSX 中有条件地排序（）和 map（）或仅 map（）

React.js: how to sort() and map() or only map() conditionally in JSX

reactjs

sorting

conditional-statements

mapping