為特定子組件反應 propTypes

Question

我有一個像這樣的功能組件：

const Foo = () => <div>Hello world</div>;

現在我有另一個接受子級的組件，但應特別限制為 1 個或多個Foo組件（不允許其他組件）。

const Bar = ({ children }) => <div>{children}</div>;

如何在Bar上設置propTypes以實現此驗證？

Bar.propTypes = {
  children: PropTypes.oneOf([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]);
};

上面的內容太松散了，因為它會讓任何組件類型成為子組件。 我如何限制它只允許Foo ？

Answer 1

您可以使用PropTypes.shape

Bar.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.shape({
      type: PropTypes.oneOf([Foo]),
    }),
    PropTypes.arrayOf(
      PropTypes.shape({
        type: PropTypes.oneOf([Foo]),
      })
    ),
  ]).isRequired
};