呈现列标题，其中有些带有cellRenderer属性

Question

如何使这个代码块更短？我在重复我自己，因为这个道具cellRenderer。

{headers.map((header, i) => {
  return header.index ? (
    <Column
      label={header.label}
      dataKey={header.id}
      disableSort
      width={100}
      flexGrow={1}
      cellRenderer={this._generateCheckbox}
    />
  ) : (
    <Column
      label={header.label}
      dataKey={header.id}
      disableSort
      width={100}
      flexGrow={1}
    />
  );
})}

Answer 1

将undefined传递给cellRenderer应该与根本不传递它一样。因此，可以通过执行以下操作来消除重复：

{headers.map((header, i) => {
  return (
    <Column
      label={header.label}
      dataKey={header.id}
      disableSort
      width={100}
      flexGrow={1}
      cellRenderer={header.index ? this._generateCheckbox : undefined}
    />
  )
})}

或者，您可以构建一个extraProps对象，然后将其扩展到列中。

{headers.map((header, i) => {
  let extraProps = header.index ? {
    cellRenderer: this._generateCheckbox
  } : {}
  return (
    <Column
      label={header.label}
      dataKey={header.id}
      disableSort
      width={100}
      flexGrow={1}
      {...extraProps}
    />
  )
})}