10、React 组件的属性验证与扩展

React 组件的属性验证与扩展

在 React 开发中，组件的属性验证和扩展是两个重要的方面。属性验证能够确保组件接收到的数据是有效的，而组件扩展则可以为现有组件添加新的功能和行为。

自定义属性验证器

通常情况下， PropTypes 提供的默认验证器可以满足大部分场景的需求。但在某些特定情况下，我们需要确保传递给组件的属性值符合特定的条件，这时就需要自定义属性验证函数。

以下是一个自定义属性验证的示例：

import React from 'react';

const MyComponent = ({
  myArray,
  myNumber,
}) => (
  <section>
    <ul>
      {myArray.map(i => (
        <li key={i}>{i}</li>
      ))}
    </ul>
    <p>{myNumber}</p>
  </section>
);

MyComponent.propTypes = {
  myArray: (props, name, component) =>
    (Array.isArray(props[name]) &&
      props[name].length) ? null : new Error(
        `${component}.${name}: expecting non-empty array`