React当中的组件嵌套很常见，外部组件暴露的属性也许会干一些复杂的实现细节。
我们可以使用属性延伸覆盖原来的属性值

var Component = React.createClass({render: function () {return <div {...this.props} title="zzz">this is a div</div>}
});React.render(<Component name="xxx" title="yyy"/>,document.body
);

手动转移

大部分情况你应该明确的向下传递属性，这样可以确保你只需要暴露内部API的一个子集。

var FancyCheckbox = React.createClass({render: function() {var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';return (<div className={fancyClass} onClick={this.props.onClick}>{this.props.children}</div>);}
});
React.render(<FancyCheckbox checked={true} onClick={console.log.bind(console)}>Hello world!</FancyCheckbox>,document.getElementById('example')
);

但是name属性、title属性或者onMouseOver属性呢？

利用JSX ... 转移

var FancyCheckbox = React.createClass({render: function() {var { checked, ...other } = this.props;var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';// `other` contains { onClick: console.log } but not the checked propertyreturn (<div {...other} className={fancyClass} />);}
});
React.render(<FancyCheckbox checked={true} onClick={console.log.bind(console)}>Hello world!</FancyCheckbox>,document.body
);

var { checked, ...other } = this.props;使用了ES7的结构化赋值，所以引入时要加入harmony，如下：

<script type="text/jsx;harmony=true">

React学习笔记—属性转移相关推荐

react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
react render没更新_web前端教程分享React学习笔记（一）
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
React学习笔记 - 组件Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
React学习笔记：入门案例
React学习笔记:入门案例 React 起源于 Facebook 内部项目,因为市场上所有 JavaScript MVC 框架都不令人满意,公司就决定自己写一套,用来架设 Instagram 的网站 ...
React学习笔记(五) 状态提升
状态提升究竟是什么东西呢?别急,下面让我们一步一步来看看究竟要怎么使用状态提升假设我们有这样一个需求,提供两个输入框(分别属于两个组件),保证输入框里面的内容同步好,下面我们先来封装一个输入框组件 ...
React学习笔记八-受控与非受控组件
此文章是本人在学习React的时候,写下的学习笔记,在此纪录和分享.此为第八篇,主要介绍非受控组件与受控组件. 目录 1.非受控组件 1.1表单提交案例 1.2案例的总结 2.受控组件 2.1受控组件 ...
React学习笔记二：实现一个数字时钟
<!DOCTYPE html> <html lang="zhm"><head><meta charset="UTF-8" ...
react学习笔记（完整版 7万字超详细）
1. React基础 1-1. react-调试插件安装浏览器右上角 - ===> 更多工具 ===> 扩展程序 ==> 开启开发者模式 ==> 将调试插件包拖拽进来即可 1 ...

React学习笔记—属性转移

手动转移

利用JSX ... 转移

React学习笔记—属性转移相关推荐

最新文章

热门文章