Kendo-react-ui TreeList 如何自定義不同層級的單元格？

Question

class TableCell extends React.Component {

  render() {
    const { dataItem, field } = this.props

    const cellData = this.getFieldValue(dataItem, field)

    const { participantType } = dataItem
    let styles = { position: 'relative' }

    switch (participantType) {
      case 'direct':
        styles = {
          fontSize: '14px',
        }
        break
      case 'indirect':
        styles = {
          fontSize: '14px',
          fontStyle: 'italic',
        }
        break
      case 'addressable':
        styles = {
          fontSize: '13px',
          fontStyle: 'italic',
        }
        break
    }

    return (
      <td style={styles}>
        <span>{cellData}</span>
      </td>
    )
  }
}

它適用於不可擴展的列。 如果我使用“可擴展”列，它會重新設計樣式，但會覆蓋擴展/折疊行為，並且用於擴展的箭頭消失。

是否有可能以另一種方式自定義單元格？

Answer 1

有幫助我的答案是 TreeList 道具rowRender 。

rowRender? (row: ReactElement<HTMLTableRowElement>, props: TreeListRowProps) => React.ReactNode

它幫助我根據一行的數據對一行中的所有單元格進行樣式設置。 可以使用 React.cloneElement 覆蓋當前行並添加一些額外的道具，如style 。