ReactJs: 对于this.props.children应该是什么PropTypes？

13 浏览
0 Comments

ReactJs: 对于this.props.children应该是什么PropTypes？

假设有一个简单的组件，它渲染它的子元素：

class ContainerComponent extends Component {
  static propTypes = {
    children: PropTypes.object.isRequired,
  }
  render() {
    return (
        {this.props.children}
    );
  }
}
export default ContainerComponent;

问题：子元素的propType应该是什么？

当我将其设置为对象时，如果我使用多个子元素的组件，将失败：

  1
  2

警告：未通过prop类型检查：已提供了类型为数组的无效prop“children”到“ContainerComponent”，预期类型为“object”。

如果我将其设置为数组，则仅提供一个子元素时将无法通过，即：

  1

警告：未通过prop类型检查：已提供类型为object的无效子元素prop到“ContainerComponent”，预期类型为数组。

请建议，是否应该不要为子元素做propTypes检查？

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

对于我来说，这取决于组件。如果你知道需要用什么来填充，那么你应该尝试明确地指定，或者使用多种类型，例如：

PropTypes.oneOfType

。如果你想引用React组件，那么你会找到

PropTypes.element

。虽然

PropTypes.node

描述的是可以呈现的任何东西-字符串、数字、元素或这些东西的数组。如果这适合你的话，那么就用这种方式。对于非常通用的组件，可以有许多类型的子代，你也可以使用下面的方法，但我不建议这样做。正如下面的评论中提到的那样，它有些违背了使用PropTypes的初衷，通常还有其他的方法来指定你的组件需要什么。此外，请记住，eslint和ts可能(很可能)不会满意这种不明确的方法：

PropTypes.any

。

0
0 Comments

试试类似这样的东西，使用oneOfType或PropTypes.node

import PropTypes from 'prop-types'
...
static propTypes = {
    children: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node
    ]).isRequired
}

或

static propTypes = {
    children: PropTypes.node.isRequired,
}

0