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

Question

我使用 react.js 一段时间了。最近，我开始看到如下错误:

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

我不知道发生了什么。我用谷歌搜索了一下，发现其他人说这是 props 的问题。这是我看到的一个场景。而不是:

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

以下工作没问题:

<MyComponent {...props} />

我想了解一下react中的IntrinsicAttributes和IntrinsicClassAttributes是什么。您能否给我一个详细的答案，为什么会出现此类错误以及这些错误到底是什么？

Answer 1

IntrinsicAttributes 和 IntrinsicClassAttributes

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

<小时/>

基本原则

假设您有

interface BarProps {
  foo: string;
}

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

如果你尝试渲染它

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

你会得到类似的错误；因为你违反了接口(interface)类型检查。该组件应该有一个强制性的 Prop ，即 BarProps在这里作为参数传递。

要使其正常工作，您需要执行类似的操作..

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

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

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

或者输入foo可选..

interface BarProps{
  foo?: string;
}

<小时/>

想法是实现一致性。

在你的情况下，你传递了一个未知的 Prop ，即 action您的组件中可能尚未定义它。

当您像 <MyComponent {...props} /> 这样调用组件时- 它本质上意味着，导入所有可用的 Prop 。

当您明确调用 action 时 Prop 如 <MyComponent action={this.state.action} />它会抛出一个大错误。

<小时/>

上述错误是相当臭名昭著的。您可以在这个debugging guide中找到更多见解针对 React 和 TypeScript，它突出显示了这些错误并分享了可能的修复方法。

您可以阅读有关 IntrinsicAttributes 实现的更多信息和IntrinsicClassAttributes在这个repository