React中props.children和React.Children的区别
在React中,当涉及组件嵌套,在父组件中使用
props.children
把所有子组件显示出来。如下:
function ParentComponent(props){
return (
<div>
{props.children}
</div>
)
}
如果想把父组件中的属性传给所有的子组件,该怎么做呢?
--使用React.Children
帮助方法就可以做到。
比如,把几个Radio组合起来,合成一个RadioGroup,这就要求所有的Radio具有同样的name属性值。可以这样设计:把Radio看做子组件,RadioGroup看做父组件,name的属性值在RadioGroup这个父组件中设置。
首先是子组件:
//子组件
function RadioOption(props) {
return (
<label>
<input type="radio" value={props.value} name={props.name} />
{props.label}
</label>
)
}
然后是父组件,不仅需要把它所有的子组件显示出来,还需要为每个子组件赋上name属性和值:
//父组件用,props是指父组件的props
function renderChildren(props) {
//遍历所有子组件
return React.Children.map(props.children, child => {
if (child.type === RadioOption)
return React.cloneElement(child, {
//把父组件的props.name赋值给每个子组件
name: props.name
})
else
return child
})
}
//父组件
function RadioGroup(props) {
return (
<div>
{renderChildren(props)}
</div>
)
}
function App() {
return (
<RadioGroup name="hello">
<RadioOption label="选项一" value="1" />
<RadioOption label="选项二" value="2" />
<RadioOption label="选项三" value="3" />
</RadioGroup>
)
}
export default App;
以上,React.Children.map
让我们对父组件的所有子组件又更灵活的控制。
项目地址:https://github.com/darrenji/ReactNestedComponentExample
React中props.children和React.Children的区别的更多相关文章
- React中props
今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了 ...
- React中Props 和 State用法
React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...
- React中props与state
以下内容均为个人理解. 1.state: 在react中,state可以看成管理页面状态的集合(实则一个对象而已),库里面的成员均为页面渲染变量,整个页面为一个状态机,当state发生变化时,页面会重 ...
- 关于React中props与state的一知半解
props props英文翻译是道具的意思,我个人理解为参数,如果我们将react组件看作是一个函数,那么props便是函数接收外部数据所使用的参数.props具有以下特性: 1.不可变(只读性) p ...
- React中props和state相同点和不同点
朋友们,我想死你们了,最近这几天忙着和病魔作斗争所以没怎么写博客,今天感觉好点了,赶紧来写一波,就是这木敬业. 今天我们来讨论讨论props和state相同点和不同点 首先我来概要说明一下这两者 pr ...
- react中 props,state与render函数的关系
我们很明显的能够感受到,react是一门数据驱动的框架,当数据发生变化,页面就会自动发生变化,他背后的原理是怎么样子的呢 比如todolist例子里面,inputValue变了,框里面的内容就会自动变 ...
- react中 props,state,render函数的关系
1.当组件的 state 或者 props 发生改变的时候,自己的render函数就会重新执行. 2. 当父组件的render函数执行时,其所有子组件的render函数都会重新执行.
- React中异步模块api React.lazy和React.Suspense
React.lazy React.lazy 这个函数需要动态调用 import().它必须返回一个 Promise,该 Promise 需要 resolve 一个 defalut export 的 R ...
- React中state与props介绍与比较
一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...
随机推荐
- Python.Scrapy.12-scrapy-source-code-analysis-part-2
Scrapy 源代码分析系列-2 signals, signalmanager, project, conf 1. 模块: signals.py signalmanager.py project.py ...
- Python.resource-for-python-from-internet
1. pyvideo Python related video indexed so you can find it. http://pyvideo.org/ 2. 6 Useful Python L ...
- python dict
###字典的基本结构 info = { "k1" : "v1", "k2" : "v2" } ###字典的valus可以 ...
- java中this用法总结
1,当局部变量和成员变量重名的时候,在方法中使用this表示成员变量以示区分. class Demo{ String str = "这是成员变量"; void fun(String ...
- Model层数据验证
问题1:View层如何向Controller的Action传递Model数据?在View中,可以使用Form表单进行模型数据的提交,同样的,我们需要关联提交数据的类型,则需要在View中使用@mode ...
- UVA 12657 Boxes in a Line 双向链表
题目连接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=47066 利用链表换位置时间复杂度为1的优越性,同时也考虑到使用实际 ...
- tar-usage
tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...
- Nginx学习笔记(九) 配置文件详细说明
配置文件详细说明 工作了几个月要开始做一些后台开发,免不了接触nginx,以前一般只是简单的使用,更多的分析内部模块的具体实现,为了部署需要进一步掌握配置方法. 全局配置信息 #nginx worke ...
- 配置SharePoint 2013 Search 拓扑结构
在单台服务器上安装了 SharePoint Server 2013,并且创建了具有默认搜索拓扑的 Search Service 应用程序.在默认搜索拓扑中,所有搜索组件都位于承载管理中心的服务器上.S ...
- ASP.NET 5系列教程 (二):Hello World
本篇文章内容比较基础,主要是向大家展示如何创建一个 ASP.NET 5 工程,主要包含内容如下: 创建ASP.NET 5 工程 添加 Todo 控制器 安装 K Version Manager 执行 ...