避免重复的代码段并提取此功能

Question

如何避免重复的代码在这里更好。我尝试使用diff道具呈现albeRow两次，但我有TableCell Rendering的重复代码。

{data.map((item, index) => 
    selectable && !!selected 
     ? <TableRow 
      hover 
      onClick={() => { 
       onSelect(selected.includes(index) 
        ? selected.filter(x => x != index) 
        : [...selected, index])}} 
      role="checkbox" 
      aria-checked={selected.includes(index)} 
      tabIndex="-1" 
      key={index} 
      selected={selected.includes(index)} 
      > 
      <TableCell checkbox> 
       <Checkbox checked={selected.includes(index)}/> 
      </TableCell> 
      {columns.map(({dataKey, cellRenderer, numeric}, index) => 
       <TableCell key={index} numeric={numeric}> 
        {(cellRenderer || defaultCellRenderer)({item, dataKey})} 
       </TableCell>)} 
     </TableRow> 
     : <TableRow hover key={index}> 
      {columns.map(({dataKey, cellRenderer, numeric}, index) => 
       <TableCell key={index} numeric={numeric}> 
        {(cellRenderer || defaultCellRenderer)({item, dataKey})} 
       </TableCell>)} 
     </TableRow> 
)} 

Answer 1

据我所知，selectable && !!selected是处理选择行或不选择的主要条件。在这种情况下，我会用它来渲染组件：

import React from 'react' 
import { TableRow, TableCell, Checkbox } from 'anything' 

export default function YourCompoment({ 
    columns, 
    data, 
    selectable, 
    selected, 
    onSelect, 
}) { 
    const canSelect = selectable && !!selected 

    return (
    <div> 
     {data.map((item, index) => 
     <TableRow 
      hover 
      onClick={canSelect &&() => { 
      onSelect(
       selected.includes(index) 
       ? selected.filter(x => x != index) 
       : [...selected, index] 
      ) 
      }} 
      role={canSelect ? 'checkbox' : 'anyOtherValue'} 
      aria-checked={canSelect && selected.includes(index)} 
      tabIndex="-1" 
      key={index} 
      selected={canSelect && selected.includes(index)} 
     > 
      {canSelect && 
      <TableCell checkbox> 
       <Checkbox checked={selected.includes(index)} /> 
      </TableCell>} 
      {columns.map(({ dataKey, cellRenderer, numeric }, columnIndex) => 
      <TableCell key={columnIndex} numeric={numeric}> 
       {(cellRenderer || defaultCellRenderer)({ item, dataKey })} 
      </TableCell> 
     )} 
     </TableRow> 
    )} 
    </div> 
) 
}