openlang

TSX 的 label 出现 TS2339,React 不接受 for 属性

使用 typescript、react、TSX 源文件以及 definitely typed 声明时,编译给出这个错误。

  error TS2339: Property 'for' does not exist on type 'HTMLProps<HTMLLabelElement>'.

编译包含以下 TSX 的组件时就会发生

  <label for={this.props.fieldId} className="field-caption">{this.props.caption}</label>

我已经解决了,但还是贴出来,方便下一个碰到这个问题的人,因为在 Google 和 StackOverflow 上搜索都没找到答案

从英语翻译查看原文

后续讨论 2

顺着彼此的依据读下去
  1. 固定链接

    把属性从 for 改成 htmlFor 就解决了

      <label htmlFor={this.props.fieldId} className="field-caption">{this.props.caption}</label>

    看来 React 自己会特殊处理 for,就像它对 class 要求使用 className 一样,因此问题不在 definitely typed 声明。

    从英语翻译查看原文
  2. 固定链接

    那个回答基本正确,不过我想说明,"htmlFor" 和 "className" 属于 JavaScript,并非 React 独有。比如用普通 JavaScript 创建类似的标签,可以写成这样。

      const captionNode = document.createElement('label');
      captionNode.htmlFor = "field";
      captionNode.innerText = "caption";
      captionNode.className = "field-caption";

    JSX (TSX) 使用 "className" 和 "htmlFor" 可能正是出于这个原因(JSX 基本上就是直接设置这些 Javascript 属性的简写语法)。

    从英语翻译查看原文

同一个问题的其他角度

  1. 在 Java Mail 中显示发件人名称而非邮箱地址

    我通过 Java Mail API 发送消息。邮件到达后,收件箱显示的是发件地址。我想用一些文本替代这个地址。这应该是可以的,因为我收到的 facebook 邮件在收件箱里显示 "Facebook - Message title",而不是 "mail…

    回复 2最近活动 java
  2. 从 TypeScript 访问 Dynamics CRM

    我的 CRM 代码在网页资源中运行,所以要获取实体数据,就得写成 这样来读取数据。 可惜用 typescript 编写时,这个表达式无法编译。现在我手动把 window.parent 加到 Xrm.Page 前面……(Xrm 类型定义已经装好了),这…

    回复 2最近活动 typescript
  3. Gleam 的 HTTP 响应头需要怎样的日期格式?

    我想发送一个 Date 响应头。所需的格式如下。 这是我目前尝试的代码。

    回复 3最近活动 gleam