react 动态添加组件属性_React的组件动态参数使用Underscore和Context来传递

通常情况下，子组件明确地知道从props中传入的属性，甚至要对传入的属性进行限定。但父组件向子组件传递参数时，有时参数名称是作为变量出现的，无法预先明确下来，这就是动态的参数传递。动态参数传递的方法是使用展开属性的方法，直接传递一个属性对象，但需要加入特殊的标识符“…”，如下：

return ;

有时把所有属性都传下去是冗长且不安全的。这时可以使用ES 6规范解构赋值中的剩余属性特性，把未知属性批量提取出来。下面的示例将this.props中除了checked属性之外的其他属性复制到other变量中再传递给组件，但这里的“…”表示剩余属性，与上例中出现的“…”展开属性是不一样的。

var { checked, ...other } = this.props;

return ;

如果上面的other对象中也含有attrMore属性，则会被覆盖。这里的顺序很重要，把{...other}放到JSX props前面会使它不被覆盖。

在数据通过组件树逐层传递时，有时某些属性会从上层组件手动逐层传递到最底层的组件，比如A组件为了给包含在B组件中的C组件传递一个prop，需要把参数在组件中传递两次才能最终将A组件中的prop传递给C组件。这样的传递既烦琐又无聊，而且使B组件在中间参与了与自己无关的逻辑。针对这个问题，我们可以使用Context特性，其能实现组件树上的数据越级传递。

Context是React 0.14版本新增的一个高级的、实验性的机制，将来的API细节可能会有一些更改，不推荐频繁使用。如果确实需要，应尽量保持在小范围内使用，并且避免直接使用Context的API，以便于以后的升级。

将上面的例子改为使用Context机制进行数据传递，重点关注加粗部分和相应注释。

在示例代码中，在下级组件Button中定义contextTypes，并通过this.context访问数据，在上层组件MessageList通过添加childContextTypes和getChildContext()提供数据，React自动向下传递数据，使得组件树中上层组件的任意层级的下级组件都能获得上层组件中的数据。Context机制在React的路由管理框架router中也有应用。

react 动态添加组件属性_React的组件动态参数使用Underscore和Context来传递相关推荐

android动态添加布局属性 layoutparmas,Android 代码动态布局 LayoutParams 使用
先来看一个简单的布局,先用xml写 xmlns:tools="http://schemas.android.com/tools" android:layout_width=&quo ...
antd 动态添加表单_react Ant Design 动态生成表单，并带验证
写点杂记,写这个文章原因是因为我对象要做这个功能,我们正好用到了特意拆写成了1个简单的demo import React, {Component} from 'react' import {conne ...
python 类装饰器和继承_python装饰器、继承、元类、mixin，四种給类动态添加类属性和方法的方式(一)...
介绍装饰器.继承.元类.mixin,四种給类动态添加类属性和方法的方式有时候需要給类添加额外的东西,有些东西很频繁,每个类都需要,如果不想反复的复制粘贴到每个类,可以动态添加. 1 #coding= ...
vue 动态添加click_vue，在模块中动态添加dom节点，并监听
vue向数组中动态添加数据 vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action th ...
react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
react 子传参父_React 子组件向父组件传值的方法
本文介绍了React 子组件向父组件传值的方法,分享给大家子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件 ...
(转)AS3函数动态添加实例属性
var shot:Function=function():void{ shot['times']++; trace("shot():times:"+ ...
js 对象动态添加/设置属性名和属性值
访问对象属性一共有两种方法:点获取法和方括号获取法. 有一个对象 Obj = {"Name":"xiaoming","AGE":" ...
vue 动态添加html属性,vue.set如何添加属性？
在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义 ...

react 动态添加组件属性_React的组件动态参数使用Underscore和Context来传递

react 动态添加组件属性_React的组件动态参数使用Underscore和Context来传递相关推荐

最新文章

热门文章