zoukankan      html  css  js  c++  java
  • React props.children

    它表示组件所有的子节点。在组件内部使用this.props.children,可以拿到用户在组件里面放置的内容。

    数据类型PropTypes

    • 如果当前没有子节点,它就是undefined
    • 如果只有一个子节点,数据类型是object
    • 如果有多个子节点,数据类型是Array

    可以使用PropTypes进行类型检测

    使用 PropTypes.element ,可以指定仅将单一子元素传递给组件,作为子节点。

    MyComponent.propTypes = {
      children: PropTypes.element.isRequired
    };

    不确定 props.children 会被传入一个还是多个子节点时,可以使用 PropTypes.node 类型,代表任何可被渲染的元素(包括数字、字符串、元素或数组)。

    MyComponent.propTypes = {
      children: PropTypes.node
    };

    React.Children

    React 提供了工具方法 React.Children 来处理 this.props.children。

    1. React.Children.map

    object React.Children.map(object children, function fn)
    遍历 props.children ,在每一个子节点上调用 fn 函数。

    2. React.Children.forEach 

    React.Children.forEach(object children, function fn)
    类似于 React.Children.map(),但是不返回对象。

    3. React.Children.count

    number React.Children.count(object children)
    返回 children 当中的组件总数。

    4. React.Children.only

    object React.Children.only(object children)
    返回 children 中仅有的子节点。如果在 props.children 传入多个子节点,将会抛出异常。

    原文链接:https://blog.csdn.net/u012372720/java/article/details/94000150

  • 相关阅读:
    [哈希][倍增] Jzoj P5856 01串
    [exgcd] Jzoj P5855 吃蛋糕
    [折半搜索][分治][二分] Jzoj P5851 f
    [lca][主席树] Jzoj P5850 e
    [二分][树状数组] Jzoj P5849 d
    [容斥] Jzoj P5843 b
    [前缀和][枚举] Jzoj P5842 a
    [平衡规划][模拟][前缀和] Jzoj P4724 斐波那契
    [spfa] Jzoj P4722 跳楼机
    [模拟] Jzoj P2499 东风谷早苗
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/13220812.html
Copyright © 2011-2022 走看看