React.js：类型“X”上不存在属性“children”

React.js: 类型 ‘X’ 上不存在属性 ‘children’

React.js: Property ‘children’ does not exist on type ‘X’

React.js 错误“Property ‘children’ does not exist on type”发生在我们尝试访问children我们还没有输入 prop 的组件中的属性时。

要解决该错误，请children在组件中键入 prop as
React.ReactNode。

属性子项在类型上不存在

下面是错误如何发生的示例。

应用程序.tsx


type BoxProps = {
  name: string;
  country: string;
};

// 👆️ forgot to type `children` property

const Box = (props: BoxProps) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <h1>{props.country}</h1>
      {/* ⛔️ Error: Property 'children' does not
       exist on type 'BoxProps'.ts(2339) */}
      {props.children}
    </div>
  );
};

const App = () => {
  return (
    <div>
      {/* ⛔️  Property 'children' does not exist
       on type 'IntrinsicAttributes & BoxProps'.ts(2322) */}
      <Box name="James Doe" country="Germany">
        <h1>Hello</h1>
        <h1>World</h1>
      </Box>
    </div>
  );
};

export default App;

组件Box尝试访问对象children的属性props
，但尚未在BoxProps类型别名中为其定义类型。

输入`children`属性为`React.ReactNode`

要解决该错误，请将children属性键入为React.ReactNode。

应用程序.tsx


import React from 'react';

type BoxProps = {
  name: string;
  country: string;
  children: React.ReactNode; // 👈️ added type for children
};

const Box = (props: BoxProps) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <h1>{props.country}</h1>
      {props.children}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Box name="James Doe" country="Germany">
        <h1>Hello</h1>
        <h1>World</h1>
      </Box>
    </div>
  );
};

export default App;

现在我们可以访问组件children中的属性了Box。

我们也可以children在我们的组件中向它传递一个道具App。

为组件使用自闭标签

如果您不打算传递children给Box组件，则应该使用组件 as<Box myProp="some value" />和 not
<Box>Some children</Box>。

每次使用带有开始和结束标签的组件时，都会向它传递一个 prop。 children

如果您不打算这样做，请使用自闭合标签。

应用程序.tsx


type BoxProps = {
  name: string;
  country: string;
};

const Box = ({name, country}: BoxProps) => {
  return (
    <div>
      <h1>{name}</h1>
      <h1>{country}</h1>
    </div>
  );
};

const App = () => {
  return (
    <div>
      {/* 👇️ No children props passed (self-closing tag) */}
      <Box name="James Doe" country="Germany" />
    </div>
  );
};

export default App;

props您还可以使用解构来避免每次都必须访问对象的属性
。

应用程序.tsx


import React from 'react';

type BoxProps = {
  name: string;
  country: string;
  children: React.ReactNode;
};

// 👇️ destructuring properties of the props object
const Box = ({name, country, children}: BoxProps) => {
  return (
    <div>
      <h1>{name}</h1>
      <h1>{country}</h1>
      {children}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Box name="James Doe" country="Germany">
        <h1>Hello</h1>
        <h1>World</h1>
      </Box>
    </div>
  );
};

export default App;

使用`any`类型来禁用类型检查

如果您不知道组件采用的所有道具的类型并且想要禁用类型检查，请使用类型any。

应用程序.tsx


// 👇️ `any` disables type checking
const Box = ({name, country, children}: any) => {
  return (
    <div>
      <h1>{name}</h1>
      <h1>{country}</h1>
      {children}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Box name="James Doe" country="Germany">
        <h1>Hello</h1>
        <h1>World</h1>
      </Box>
    </div>
  );
};

export default App;

我们将对象的类型设置props为any，这有效地
禁用了类型检查。

这意味着我们可以访问props对象的任何属性而不会出现类型检查错误，但我们也没有利用 TypeScript。

如果您收到错误
类型 {children: Element} 没有与类型 IntrinsicAttributes 共有的属性，请单击链接并按照说明进行操作。

使用 React.FunctionComponent

您可能还会看到使用内置React.FunctionComponent
类型的示例。

应用程序.tsx


import React from 'react';

type BoxProps = {
  name: string;
  country: string;
  children: React.ReactNode;
};

// 👇️ using React.FunctionComponent
const Box: React.FunctionComponent<BoxProps> = ({name, country, children}) => {
  return (
    <div>
      <h1>{name}</h1>
      <h1>{country}</h1>
      {children}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Box name="James Doe" country="Germany">
        <h1>Hello</h1>
        <h1>World</h1>
      </Box>
    </div>
  );
};

export default App;

该接口使用泛型FunctionComponent为 props 对象获取类型
。

考虑它的一个简单方法是，我们正在将一个类型为props对象的参数传递给FunctionComponent接口。

使用FunctionComponent类型与我们之前直接输入 props 对象非常相似，但它还设置了组件的返回类型。