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不满意

Property 'idx' does not exist on type '{ props: RowRender; }'.

如何解决？

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>;
};

Typescript 中的 React Data Grid Custom Row Renderer 函数

React Data Grid Custom Row Renderer function in Typescript

reactjs

typescript

react-data-grid