React PropTypes.shapes相互依赖

Question

我声明了两个形状：

export const parentShape = PropTypes.shape({
  id: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  // ...someProps
  children: PropTypes.arrayOf(childShape),
});

export const childShape = PropTypes.shape({
  id: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  // ...otherProps
  parent: parentShape,
});

parentShape使用childShape，childShape使用parentShape。

现在我对在定义childShape之前使用它提出了警告。我怎么才能修复它？

Answer 1

您可以使用parentShape的属性创建一个变量(parentShapeProps)，而不是直接将其传递给PropTypes.shape，然后只有在定义了childShape之后才能将children添加到parentShapeProps

const parentShapeProps = {
  id: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  // ...someProps
};

export const parentShape = PropTypes.shape(parentShapeProps);

export const childShape = PropTypes.shape({
  id: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  // ...otherProps
  parent: parentShape,
});

parentShapeProps.children = PropTypes.arrayOf(childShape);

Answer 2

您可以使用let/var预定义childShape：

import PropTypes from 'prop-types';

let childShape;

const parentShape = PropTypes.shape({
  id: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  // ...someProps
  children: PropTypes.arrayOf(childShape),
});

childShape = PropTypes.shape({
  id: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  // ...otherProps
  parent: parentShape,
});

export default { childShape, parentShape };