React中props验证不足的问题及解决方案

function MyComponent({ name }) {
  return <div>Hello, {name}</div>;
}

// 未使用 propTypes 或 TypeScript

import PropTypes from 'prop-types';

function MyComponent({ name }) {
  return <div>Hello, {name}</div>;
}

MyComponent.propTypes = {
  name: PropTypes.string // 未指定是否必传
};

function MyComponent({ name }) {
  return <div>Hello, {name}</div>;
}

MyComponent.propTypes = {
  name: PropTypes.string.isRequired // 未设置默认值
};

function MyComponent({ user }) {
  return <div>{user.name}</div>;
}

MyComponent.propTypes = {
  user: PropTypes.object // 未验证嵌套属性
};

import PropTypes from 'prop-types';

function MyComponent({ name }) {
  return <div>Hello, {name}</div>;
}

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

interface Props {
  name: string;
}

function MyComponent({ name }: Props) {
  return <div>Hello, {name}</div>;
}

import PropTypes from 'prop-types';

function MyComponent({ name }) {
  return <div>Hello, {name}</div>;
}

MyComponent.propTypes = {
  name: PropTypes.string
};

MyComponent.defaultProps = {
  name: 'Guest'
};

import PropTypes from 'prop-types';

function MyComponent({ user }) {
  return <div>{user.name}</div>;
}

MyComponent.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string.isRequired,
    age: PropTypes.number
  }).isRequired
};

import PropTypes from 'prop-types';

function MyComponent({ user }) {
  return <div>{user.name}</div>;
}

MyComponent.propTypes = {
  user: PropTypes.exact({
    name: PropTypes.string.isRequired,
    age: PropTypes.number
  }).isRequired
};

import PropTypes from 'prop-types';

function MyComponent({ value }) {
  return <div>{value}</div>;
}

MyComponent.propTypes = {
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]).isRequired
};

import PropTypes from 'prop-types';

function MyComponent({ items }) {
  return <div>{items.map(item => <div>{item.name}</div>)}</div>;
}

MyComponent.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired
    })
  ).isRequired
};