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 。