文档章节

跟着设计哲学走:React数据绑定和获取,别闯红灯

fir01
 fir01
发布于 2016/03/05 11:13
字数 748
阅读 524
收藏 2

行业解决方案、产品招募中!想赚钱就来传!>>>

一、传统方式存取数据react实现:


<div key="123"
            parent={this}
            viewdState={StateCode.MainBoxItem}
            data-view-state={StateCode.MainBoxItem}
            onClick={this.handleItemShow}
          >




编译以后通过谷歌react插件查看结果:


编译以后浏览器结果:


<div data-view-state="MainBoxItem" data-reactid=".0.0.0.0.2.$123">1\main  page.click me</div>


怎么所有非data-开头的属性都没有了?是的,这是react的潜规则,另外还有一条就是就是会自动添加data-reactid属性。

注意到图片中我标注了两处,原因?比较传进去的对象,就是tagName的区别,一个已经是原生的dom标记div,一个是react的自定义dom。编译器走到这里已经开始有区别了:

1)原生dom是废除一切除data-开始的属性。就算你传react对象给原生dom做属性,也会被当普通dom处理,就是说你传的react对象在原生dom百分百的是失效的

2)自定react标签是会被编译的,你传的参数都是被放在this.props里面。 

要怎么得到传的data-属性?


console.log(event.nativeEvent.target.getAttribute("data-view-state"));



结论:很复杂


二、react自定义组件方式:

看之前要充分理解js的一句经典:一切都是对象

1、子组件:

let DivItem = React.createClass({
  propTypes: {
    onClickMeItem: React.PropTypes.func,
    parent: React.PropTypes.node,
  },
  getDefaultProps() {
    return {
      onClickMeItem: null,
      parent: null,
    };
  },
  onClickMeItemInner:function(){
    console.log(this.props.parent);//子组件可以获取初始化的时候传过来的parent属性,并且是父对象哦
    //子组件可以获取初始化的时候传过来的onClickMeItem属性对应的函数对象handleItem2Show.
    //在标记<DivItem onClickMeItem=上这样申明是不是看起来是自定义事件呢
    this.props.onClickMeItem(this);
  },
  render:function(){
    return (
      <div onClick={this.onClickMeItemInner}>Click me!</div>
    );
  },
});



2、父组件中


constructor(props, context) {
    super(props, context);
//下面这句有没有对下面“@特别的玩意”很重要
    this.handleItem2Show= this.handleItem2Show.bind(this);

  }
..................
  handleItem2Show(ev) {
    console.log(ev);//我打印了子组件传过来的值,就是子组件自己
    console.log(ev.props.parent);//我打印了子组件上一个对自身的引用,就是打印自己啦
    //这里打印的是谁呢?handleItem2Show方法虽然在子组件调用执行的?
    // 两种可能:如果你没在父组件中某处(一般构造函数中)调用this.handleItemShow = this.handleItemShow.bind(this);
    //那么打印的是调用者本身,就是谁在调用这个方法就是谁了
    //另外就是你绑定了this,就是你你绑定到谁就是谁的
    console.log(this);//@特别的玩意
  }         
.................
<DivItem parent={this}
                   viewdState={StateCode.MainBoxItem}
                   onClickMeItem={this.handleItem2Show}
          />



没有绑定作用域打印结果:



二、结论:跟着设计哲学走,它就是你的上帝。


fir01
粉丝 19
博文 110
码字总数 34117
作品 0
长沙
项目经理
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.4K
6
beego API开发以及自动化文档

beego API开发以及自动化文档 beego1.3版本已经在上个星期发布了,但是还是有很多人不了解如何来进行开发,也是在一步一步的测试中开发,期间QQ群里面很多人都问我如何开发,我的业余时间实在...

astaxie
2014/06/25
2.7W
22
开源数据访问组件--Smark.Data

Smark.Data是基于Ado.net实现的数据访问组件,提供基于强类型的查询表达式进行灵活的数据查询,统计,修改和删除等操作;采用基于条件驱动的操作模式,使数据操作更简单轻松;内部通过标准SQL...

泥水佬
2013/03/12
2.5K
0
数据中心生命周期管理--Foreman

Foreman是一个集成的数据中心生命周期管理工具,提供了服务开通,配置管理以及报告 功能,和Puppet Dahboard一样,Foreman也是一个Ruby on Rails程序.Foreman和 Dashboard不同的地方是在于,Fore...

匿名
2012/10/24
1.5W
0
Python数据分析工具包--Pandas

Python Data Analysis Library 或 pandas 是连接 SciPy 和 NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。Pandas 纳入了大量库和一些标准的数据模型,提供了高效地操作大型数据集...

匿名
2012/10/30
2.1W
2

没有更多内容

加载失败,请刷新页面

加载更多

代理服务器和反向代理服务器之间有什么区别? - What's the difference between proxy server and reverse proxy server?

问题: 代理服务器和反向代理服务器有什么区别? 解决方案: 参考一: https://stackoom.com/question/wRc/代理服务器和反向代理服务器之间有什么区别 参考二: https://oldbug.net/q/wRc/W...

技术盛宴
58分钟前
16
0
第八讲:配置外界可以访问虚拟机里面的HDFS

本节通过配置实现外界访问虚拟机Centos6.4里面的HDFS。为后续的java读写HDFS做准备 步骤有: 1、修改主机Windos7的网络配置 2、修改虚拟机Centos6.4里面的网络配置 3、修改虚拟机Centos6.4里...

刘日辉
今天
26
0
OSChina 周四乱弹 —— 不劳而获的饭好吃么?好吃!非常好吃!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 小小编辑推荐:《世界上不存在的歌 (2020重唱版)》- 陈奕迅 《世界上不存在的歌 (2020重唱版)》- 陈奕迅 手机党少年们想听歌,请使劲儿戳(这...

小小编辑
今天
31
3
从 GPU、TPU,到 Web 端、移动端,深度学习框架部署训练开始变简单

本文作者:o****0 早些时候的统计显示,今年3月,深度学习框架集中爆发。5月,有人发布可以直接在 iphone11上训练神经网络的开源项目。日前,百度开源国内首个可直接运行在 Web 端的深度学习...

百度开发者中心
昨天
16
0
如何从Git存储库中删除文件? - How can I delete a file from a Git repository?

问题: I have added a file named "file1.txt" to a Git repository. 我已将名为"file1.txt"的文件添加到Git存储库中。 After that, I committed it, added a couple of directories called......

富含淀粉
今天
31
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部