为特定的子组件反应 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
};

为特定的子组件反应 propTypes

React propTypes for specific children components

javascript

reactjs

react-proptypes