React Typescript - InferProps接受null，但JSX属性不接受(即id)

React Typescript是一种使用TypeScript编写React应用程序的开发工具。它结合了React的组件化开发模式和TypeScript的静态类型检查，提供了更好的代码可读性、可维护性和错误检测能力。

InferProps是React Typescript中的一个类型推断工具，用于推断组件的props类型。它可以根据组件的propTypes属性自动推断props的类型，并在编译时进行类型检查，以确保传入的props符合预期。

在React Typescript中，InferProps接受null作为props类型的一种可能性。这意味着在组件的propTypes中，可以将某个prop的类型定义为null，表示该prop可以接受null值作为有效值。

然而，在JSX属性中，不允许将null作为属性值传递。这是因为JSX属性是通过JavaScript对象字面量的方式传递的，而JavaScript中的null被视为一个特殊的值，表示空或不存在。因此，JSX属性只接受非null的值作为有效值。

对于这种情况，可以考虑使用可选属性（optional props）来解决。可选属性允许在组件的propTypes中将某个prop的类型定义为undefined，表示该prop可以不传递或传递undefined值。

以下是一个示例组件，演示了如何在React Typescript中使用InferProps和可选属性：

import React from 'react';
import PropTypes, { InferProps } from 'prop-types';

interface MyComponentProps {
  id?: number | null;
  name: string;
}

const MyComponent: React.FC<MyComponentProps> = (props: InferProps<MyComponentProps>) => {
  const { id, name } = props;

  return (
    <div>
      <p>ID: {id}</p>
      <p>Name: {name}</p>
    </div>
  );
};

MyComponent.propTypes = {
  id: PropTypes.number,
  name: PropTypes.string.isRequired,
};

export default MyComponent;

在上述示例中，MyComponent组件的props类型通过InferProps进行推断。id属性被定义为可选属性，可以接受number类型或null值。name属性被定义为必需属性，必须传递一个非空的字符串。

这个组件可以在以下场景中使用：