时间戳

首页 > 解决方案 > 不可分配给类型 IntrinsicAttributes & IntrinsicClassAttributes React.js

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

问题描述

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

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

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

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

以下工作很好：

<MyComponent {...props} />

我想了解这件事是什么IntrinsicAttributes和IntrinsicClassAttributes在react. 您能否向我提供一个详细的答案，说明为什么会发生这种类型的错误以及这些错误到底是什么？

标签： reactjstypescript

解决方案

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像这样显式调用 prop<MyComponent action={this.state.action} />时，会引发大错误。

提到的错误非常臭名昭著。您可以在此React 和 TypeScript调试指南中找到更多见解，其中突出显示了这些错误并分享了可能的修复。

您可以在此存储库中阅读有关和的实现的更多IntrinsicAttributes信息IntrinsicClassAttributes

推荐阅读