Typescript 中的 React Data Grid Custom Row Renderer 函数

Question

我想将下面的 RowRender() 函数转换为 Typescript

const RowRenderer = ({ renderBaseRow, ...props }) => {
  const color = props.idx % 2 ? "green" : "blue";
  return <div style={{ color }}>{renderBaseRow(props)}</div>;
};

此处的完整示例： React Data Grid - Intercepting a row

我的幼稚做法是

interface RowRender {
  idx: Number
};

const rowRenderer = ({ renderBaseRow, ...props }: {renderBaseRow: Function, props: RowRender}) => {
  const color = props.idx % 2 ? "green" : "blue";
  return <div style={{ color }}>{renderBaseRow(props)}</div>;
};

但是 vscode 仍然对 props.idx 不满意

类型 '{ props: RowRender; 上不存在属性 'idx' }'。

如何解决？

Answer 1

您需要通过将RowRenderer 组件声明为功能组件以及所需的通用参数来提供它的类型。您也可以参考这里的typings。

interface IRowRender {
  renderBaseRow: (e: any) => void
  idx: number;
}

const rowRenderer: React.FC<IRowRender> = ({ renderBaseRow, ...props }) => {
  const color = props.idx % 2 ? "green" : "blue";
  return <div style={{ color }}>{renderBaseRow(props)}</div>;
};