React中如何处理实体？Angular2转React新手的prop-types疑问

嗨，我完全理解你从Angular（带TypeScript实体类）转React时的困惑！之前在Angular里直接导入自定义实体类就能搞定类型校验，现在用prop-types处理嵌套结构其实也很直观，咱们一步步来解决你的问题。

首先，prop-types提供了shape()方法，专门用来定义对象类型的结构——包括嵌套的子对象，你可以在父对象的shape()里嵌套使用shape()，完美对应你这种多层嵌套的order数据结构。

具体实现步骤 #

1. 先安装并导入prop-types

首先确保你已经安装了prop-types包：

npm install prop-types --save

然后在组件文件里导入：

import PropTypes from 'prop-types';

2. 拆分定义嵌套的子对象类型

就像你在Angular里拆分实体类一样，我们可以先把嵌套的子结构（比如customer、product）单独定义出来，方便复用：

// 定义Customer的prop-types结构
const CustomerPropType = PropTypes.shape({
  firstName: PropTypes.string.isRequired, // 必填的字符串类型
  lastName: PropTypes.string.isRequired
});

// 定义Product的prop-types结构
const ProductPropType = PropTypes.shape({
  category: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired
});

3. 组合成父对象（Order）的类型

接下来把这些子类型组合成完整的Order结构：

// 定义Order的prop-types，嵌套上面的子类型
const OrderPropType = PropTypes.shape({
  date: PropTypes.string.isRequired,
  customer: CustomerPropType.isRequired, // 直接引用上面定义好的Customer类型
  product: ProductPropType.isRequired
});

4. 在组件中使用这个类型

最后在你的组件上声明propTypes，指定order属性要符合我们定义的OrderPropType：

const OrderDetail = ({ order }) => {
  return (
    <div className="order-detail">
      <h3>订单日期：{order.date}</h3>
      <p>客户：{order.customer.firstName} {order.customer.lastName}</p>
      <p>商品：{order.product.name}（分类：{order.product.category}）</p>
    </div>
  );
};

// 给组件的props指定类型校验
OrderDetail.propTypes = {
  order: OrderPropType.isRequired
};

export default OrderDetail;

额外提示 #

• 如果某个属性不是必填项，只需要去掉.isRequired即可，比如date: PropTypes.string
• 如果需要处理数组形式的嵌套数据（比如一个订单列表），可以用arrayOf()方法：

  const OrdersPropType = PropTypes.arrayOf(OrderPropType);
  

• 这些单独定义的子类型（比如CustomerPropType）可以抽成单独的文件，在多个组件里导入复用，和你之前在Angular里复用实体类的思路一致。

这样就能在运行时对嵌套的order数据进行类型校验啦，虽然不像TypeScript那样有编译时检查，但能帮你在开发阶段及时发现数据结构的问题～

内容的提问来源于stack exchange，提问作者Nico