为什么用React.Children.map(props.children, () => )而不是props.children.map(() => )

不能保证props.children将是一个数组。

以此代码为例,

<Parent>
  <h1>Welcome.</h1>
</Parent>

如果我们尝试使用props.children.map它来映射孩子,父母内部会抛出错误,因为它props.children是一个对象而不是一个数组。

props.children如果有多个子元素(如此),则React只会生成一个数组

<Parent>
  <h1>Welcome.</h1>
  <h2>props.children will now be an array</h2>
</Parent>

这就是为什么你想要赞成,React.Children.map因为它的实现考虑到props.children可能是一个数组或一个对象。

原文地址:https://www.cnblogs.com/passkey/p/10276314.html

时间: 2024-08-29 00:02:27

为什么用React.Children.map(props.children, () => )而不是props.children.map(() => )的相关文章

React基础篇(2) -- state&amp;props&amp;refs

内容简介 state props refs 行内样式及动态类名 state 基本介绍 React 把组件看成是一个状态机(State Machines).通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致. React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM). 初始化状态: constructor() { super() this.state = { stateName1 : stateValue1, stateNam

使用HashMap需要注意的事儿:不要暴露Map.entry给外部不可信代码Map.entrySet()

Map/HashMap是java中一种很常用的数据结构,一般我们在应用中做的事情就是调用put向容器写入数据或者是get从容器读取数据.Map.entrySet()这个方法返回了键值对的集合,也是JDK官方推荐的遍历Map的方式. Set<Map.Entry<String, String>> allEntrys = maps.entrySet(); for (Map.Entry<String, String> as : allEntrys) { String key =

开发Android Map程序 如何获取 apikey (Google Map API v2)

1. 在Eclise --> preference --> android --> bulid 能够看到缺省的debug keystore:注意,最新版本的Android Eclipse中无需再自己产生MD5 和 SHA1 2. 登录Google网站账户后转到如下网址 https://console.developers.google.com/project/apps~soft-edu/apiui/api?authuser=0:在该页面中点击APIs然后将Google Maps Andr

使用HashMap须要注意的事儿:不要暴露Map.entry给外部不可信代码Map.entrySet()

Map/HashMap是java中一种非经常常使用的数据结构,一般我们在应用中做的事情就是调用put向容器写入数据或者是get从容器读取数据. Map.entrySet()这种方法返回了键值对的集合,也是JDK官方推荐的遍历Map的方式. Set<Map.Entry<String, String>> allEntrys = maps.entrySet(); for (Map.Entry<String, String> as : allEntrys) { String k

react antd Warning: must set key for &lt;rc-animate&gt; children

实例中,location 有可能是一个‘’,''.split() 将输出[""],是个含有空字符串的数组,而[]是个什么都没有的数组,两者不同.code:change initialValue from :initialValue: location.split(',') || []to:initialValue: location === '' ? [] : location.split(',') 原文地址:https://www.cnblogs.com/begin256/p/113

react中constructor和super()以及super(props)的区别。

react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 constructor( )--构造方法 这是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的,如果没有显示定义,则会默认添加空的constructor( )方法. super( ) --继承 在class方法中,继承是使用 extends 关键字来实现的.子类

【react】React学习:状态(State) 和 属性(Props)

React :元素构成组件,组件又构成应用.React核心思想是组件化,其中 组件 通过属性(props) 和 状态(state)传递数据. State 与 Props 区别props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法,上层组件就可以通过下层组件的props属性进行传递,因此props是组件对外的接口.组件除了使用上层组件传递的数据外,自身也可能需要维护管理数据,这就是组件

List&amp;lt;Map&amp;lt;String, String&amp;gt;&amp;gt; 开启 Map&amp;lt;String, List&amp;lt;String&amp;gt;&amp;gt;

将List变成Map结构体,下面的文字是没有水平! 写作方法传送前土壤很长一段时间.我不知道有没有好的解决办法.我们也希望提供! Map<String, String> map1 = new HashMap<String, String>(); map1.put("a", "1"); map1.put("b", "3"); map1.put("c", "5");

自定义实现JavaScript的Map对象,修改IE不兼容MAP()的问题

由于IE8及以下版本不支持Map对象,本文为程序猿们提供了有效的解决方法. 本文重写了Map对象,实现了常用的set, get, put, clear, remove, delete, forEach, has, containsKey, isEmpty, size 等方法,使用和声明的方试和正常声明Map对象一样: var map = new Map(); 只需将下面代码拷入<script type="text/javascript"></script>中即可