Question

这是警告：

Warning: Failed prop type: Invalid prop `children` supplied to Row

我编写了一个包含行和列的网格组件。

A Row可以接受children，我正在尝试使用PropTypes进行设置。

到目前为止，我有：

Row.propTypes = {
  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  gap: PropTypes.number,
  children: PropTypes.oneOfType([
    PropTypes.element.isRequired,
    PropTypes.arrayOf(PropTypes.element.isRequired)
  ]).isRequired
};

现在这很有效，直到我添加一个子逻辑来确定是否渲染另一个子节点。

<Row size={1}>
  <Column>
    { title }
  </Column>
  {this.displayComment(item.type) && (
    <Column>
      { comment }
    </Column>
  )}
  <Column>
    { footer }
  </Column>
</Row>

this.displayComment(item.type)抛出PropType警告。一旦删除，它就完美无缺。

然后我尝试将PropTypes.func添加到children道具类型，但警告继续显示。

Answer 1

您可以使用PropTypes.node。这允许任何可以呈现的内容：数字，字符串，元素或包含这些类型的数组（或片段）以及null，undefined和false。

然后我尝试将PropTypes.func添加到子道具类型，但是警告继续显示。

PropTypes.func不起作用，因为您没有将该函数作为子函数传递，而是将其返回值。您需要允许false在您的示例中使其正常工作，因为this.displayComment(item.type)可以返回false。

针对逻辑函数

1 个答案: