使用 currying 函数反应 prop-type 验证

Question

我对 React 比较陌生，遇到了一个问题，我无法验证从 curried 函数返回的组件上的 props。

我已经尝试在“列表”和“包装组件”上验证道具类型，但我仍然没有任何成功。在这个特定实例中，我将如何验证“数据”道具？

import React from "react";
import PropTypes from "prop-types";

const styles = {
  listStyles: {
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    listStyle: "none",
  },
};

const List = WrappedComponent => ({ data }) => (
  <ul style={styles.listStyles}>
    {data &&
      data.map(item => (
        <div>
          <WrappedComponent {...item} />
        </div>
      ))}
  </ul>
);

List.propTypes = {
  data: PropTypes.array.isRequired,
};

export default List;

Answer 1

您将 propTypes 添加到外部函数而不是组件本身。

const makeList = WrappedComponent => {
  const List = ({ data }) => (
    <ul style={styles.listStyles}>
      {data &&
        data.map(item => (
          <div>
            <WrappedComponent {...item} />
          </div>
        ))}
    </ul>
  );

  List.propTypes = {
    data: PropTypes.array.isRequired,
  };

  return List
}