使用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
}