不可分配给IntrinsicAttributes和IntrinsicClassAttributes类型React.js

Question

我已经react.js工作了一段时间。最近，我开始看到如下错误：

Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes'

我不知道发生了什么。我在Google上搜索了一下，发现其他人在说这是props的问题。这是我看到的一种情况。而不是：

<MyComponent action={this.state.action} />

以下工作没问题：

<MyComponent {...props} />

我想了解一下IntrinsicAttributes中IntrinsicClassAttributes和react的含义。您能否提供详细答案，说明为什么会发生这种类型的错误？这些错误实际上是什么？

Answer 1

挖掘到Typescript的checker.ts之所以可行，可能是因为不需要执行对本质属性进行赋值的块，因为没有显式的JsxAttributes可以与该组件的调用进行比较（isComparingJsxAttributes可能为false）。如果您确实需要找出这种情况，请尝试调试Typescript的源代码。

仅举一个例子 在这里打字稿期望可以传递一些东西，只有在安装组件时才会对其进行解构。

<MyComponent {...props} />

但是在这里，打字稿会将此this.state.action视为未定义或可能为null，因为它永远不确定会传递有效值。

<MyComponent action={this.state.action} />

即使您正确设置了动作道具的类型。仍然不知道它是否有价值，是否想将其视为{}，它是一个空对象，无法分配给操作。

Answer 2

IntrinsicAttributes和IntrinsicClassAttributes

在TypeScript中实现的

接口。在使用自定义组件时，它们会影响 React 和 .jsx 与 DOM 元素的交互。

>

---

基本原理

假设您拥有

interface BarProps {
  foo: string;
}

class Bar extends React.Component<BarProps> {
  ...
}

如果您尝试渲染它

render() {
  return (
    <form>
      <Bar />
    </form>
  );
}

您将收到类似的错误；因为您违反了接口类型检查。 组件应具有强制性道具，即BarProps在此处作为参数传递。

相反，要使其正常工作，您需要做类似的事情。

render() {
  return (
    <form>
      <Bar foo="Jack Daniel's"/>
    </form>
  );
}

或者您可以将其从组件定义本身中删除。

class Bar extends React.Component<> {
 ...
}

或将foo设为可选。.

interface BarProps{
  foo?: string;
}

---

想法是实现一致性。

在您的情况下，您传递的是未知的道具，即action，它可能尚未在组件中定义。

当您像<MyComponent {...props} />那样调用组件时，这实际上意味着导入所有可用的道具。

当您像action一样显式调用<MyComponent action={this.state.action} />道具时，会引发严重错误。

---

提到的错误是非常臭名昭著的。您可以在debugging guide中找到有关React和TypeScript的更多见解，这些见解突出了这些错误并分享了可能的修复方法。

您可以在此repository

中详细了解IntrinsicAttributes和IntrinsicClassAttributes的实现