TypeScript React：如何解决：属性 ‘children’ 在类型 ‘IntrinsicAttributes & Props’ 上不存在

在本文中，我们将介绍在使用TypeScript和React时，如何解决以下错误：属性 ‘children’ 在类型 ‘IntrinsicAttributes & Props’ 上不存在。

什么是TypeScript和React？

TypeScript是一个由Microsoft开发的开源编程语言，它是JavaScript的超集，为JavaScript添加了静态类型检查和其他一些特性。React是一个用于构建用户界面的JavaScript库，它将UI分解成可重用的组件。

在React中，组件是构建UI的基本单元。每个组件接收一些输入，称为属性（props），并返回一个描述了UI的React元素。

引发错误的原因

当我们在TypeScript中使用React时，有时可能会遇到以下错误消息：属性 ‘children’ 在类型 ‘IntrinsicAttributes & Props’ 上不存在。这通常是因为我们在组件中使用了props.children，但没有正确声明它的类型。

让我们看一个示例，以更好地理解这个问题。

import React from 'react';

interface Props {
  name: string;
}

const Greeting: React.FC<Props> = ({ name, children }) => {
  return (
    <div>
      Hello {name}!
      {children}
    </div>
  );
};

export default Greeting;

在上面的示例中，我们定义了一个名为Greeting的组件，并添加了一个名为name的属性。在组件的返回值中，我们还期望显示传递给组件的子元素（props.children）。然而，TypeScript会抛出一个错误，指出属性 ‘children’ 在类型 ‘IntrinsicAttributes & Props’ 上不存在。

如何解决这个问题

要解决此问题，我们需要显式声明props的类型，包括children属性。我们可以使用React提供的类型IntrinsicAttributes和React提供的Props来实现。

下面是一个修复上面示例中错误的方法：

import React from 'react';

interface Props {
  name: string;
}

const Greeting: React.FC<Props> = ({ name, children }: React.PropsWithChildren<Props>) => {
  return (
    <div>
      Hello {name}!
      {children}
    </div>
  );
};

export default Greeting;

在上面的修复中，我们使用了React.PropsWithChildren类型作为Greeting组件参数的类型注解。PropsWithChildren是一个泛型类型，将Props类型作为其参数，并将children属性添加到Props中。这样，我们就明确地定义了props的类型，包括children属性。

现在，当我们使用Greeting组件，并传递子元素时，不再会出现属性 ‘children’ 在类型 ‘IntrinsicAttributes & Props’ 上不存在的错误。

import React from 'react';
import Greeting from './Greeting';

const App: React.FC = () => {
  return (
    <div>
      <Greeting name="John">
        <p>Welcome to my website!</p>
      </Greeting>
    </div>
  );
};

export default App;

在上面的示例中，我们使用了修复后的Greeting组件，并传递了一个带有欢迎消息的p元素作为子元素。现在，我们的应用程序将按预期工作，并且不会出现关于children属性不存在的错误。

总结

在TypeScript和React中使用props.children时，可能会遇到属性 ‘children’ 在类型 ‘IntrinsicAttributes & Props’ 上不存在的错误。为了解决这个问题，我们需要显式声明props的类型，包括children属性。我们可以使用React提供的类型IntrinsicAttributes和React提供的Props来实现。通过使用React.PropsWithChildren类型注解，我们可以明确地定义props的类型，包括children属性，并避免错误的发生。现在，我们可以在TypeScript和React应用程序中安全地使用props.children。