Reactjs 在Typescript中反应数据网格自定义行渲染器函数

我想将以下

RowRender（）

函数转换为Typescript

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

const RowRenderer=（{renderBaseRow，…props}）=>{
const color=props.idx%2？“绿色”：“蓝色”；
返回{renderBaseRow（props）}；
};

请在此填写样本：

我天真的做法是

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

界面行渲染{
idx:号码
};
const rowRenderer=（{renderBaseRow，…props}:{renderBaseRow:Function，props:RowRender}）=>{
const color=props.idx%2？“绿色”：“蓝色”；
返回{renderBaseRow（props）}；
};

但是vscode仍然不喜欢props.idx

类型“{props:RowRender；}”上不存在属性“idx”

---

如何解决此问题？

您需要通过将

行渲染器

组件声明为功能组件，并使用所需的泛型参数来提供该组件的类型。你也可以参考这里的

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

接口IRowRender{
renderBaseRow：（e:any）=>void
idx：编号；
}
常量行渲染器：React.FC=（{renderBaseRow，…props}）=>{
const color=props.idx%2？“绿色”：“蓝色”；
返回{renderBaseRow（props）}；
};

感谢您的工作：）但必须将“renderBaseRow:（e:any）=>void”替换为“renderBaseRow:（e:any）=>ReactNode”啊，是的，这很有意义，因为它返回一个ReactNode。无论如何，我对这个库不是很熟悉，这就是为什么我使用

any

作为

renderBaseRow

。你可能想为它寻找合适的打字方式！