reactjs - React 中 JSX.Element 的 TypeScript 接口问题
问题描述
我正在尝试在 React 中为数组创建一个类型,但出现以下错误。我不确定我在这里缺少什么。
谁能帮我找出我错过的东西?
谢谢
interface RowsData {
[key: string]: string | number | JSX.Element;
}
const rows: RowsData = [
{ id: 1, name: 'A', action: <div style={{ color: 'blue' }}> Hello </div> },
{ id: 2, name: 'B', action: <div style={{ color: 'blue' }}> World </div> },
{ id: 3, name: 'C', action: <div style={{ color: 'blue' }}> Foo </div> }
];
错误
Type '{ id: number; name: string; action: JSX.Element; }' is not assignable to type 'string | number | Element'.
Object literal may only specify known properties, and 'id' does not exist in type 'Element'.ts(2322)
解决方案
您的输入需要更改为,
interface Row {
id: number;
name: string;
action: React.ReactNode;
}
const rows: Row[] = [
{id: 1, name: 'A', action: <div style={{color: 'blue'}}> Hello </div>},
{id: 2, name: 'B', action: <div style={{color: 'blue'}}> World </div>},
{id: 3, name: 'C', action: <div style={{color: 'blue'}}> Foo </div>},
];
推荐阅读
- sql - 我该如何解决这个违反主键约束的错误?每当我尝试执行多次插入语句时都会发生这种情况
- mysql - TypeORM Querybuilder 获取嵌套的 INNER JOIN
- python - SGD 分类器 Precision-Recall 曲线
- haskell - 在 Haskell 中更改我的函数的类型签名
- python - 在非零值之间填充零,保留其他零
- delphi - 如何将复选框更改为纯色并在 Delphi 中更改其边框颜色
- android - kotlin 语法变为 viewBinding
- google-sheets - 将单个单元格排列到 Google 表格中的整个列
- html - 访问模板中的vue环境变量
- c++ - 使用两个线程写入文件