非DOM属性：1.dangerouslysetInnerHTML(xxs跨站攻击)

2.key

3.ref

编写组件嵌套

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      <!-- 定义子组件 -->
    var GenderSelect= React.createClass({
        render:function(){
            return (
               <!-- 父组件通过属性与子组件通信 -->
              <select onChange={this.props.handleSelect}>
                <option value="0">男</option>
                <option value="1">女</option>
              </select>
            )
        }
    });
    var SignupForm=React.createClass({

        getInitialState:function(){
              return {
                  name:'',
                  password:'',
                  gender:''
              }
        },
        <!-- 子组件事件委托 -->
         handleSelect:function(event){
             this.setState({
                gender:event.target.value
             })
        },
          handChange:function(key,event){
             var newState={}
             newState[key]=event.target.value
             this.setState(newState)
        },

        render: function(){
          console.log(this.state)
          return (

         <form>
          
            <input type="text" placeholder="说的什么吧" onChange={this.handChange.bind(this,'name')} />
                
            <input type="password" onChange={this.handChange.bind(this,'password')} />
                  
            <GenderSelect handleSelect={this.handleSelect}></GenderSelect>
            
          </form>
          )        
        
        }
    });

      ReactDOM.render(
       <SignupForm></SignupForm>,
       document.getElementById('example')
      );
     
    </script>
  </body>
</html>

编写简单的Mixin函数

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
   <!--  Mixin=一组方法：1.横向抽离
                         2.面向切面编程，插件 -->
    var BindingMixin = {
     <!-- 多个函数作用相似的组件 参数key -->
       changContent:function(key){
             <!-- 作用域 -->
             var _self=this
             <!-- 函数闭包 -->
             var newState={}
             return function(event){
                newState[key]=event.target.value
                _self.setState(newState)

             }
        }
    }
    var HelloMessage=React.createClass({
        <!-- 引用Mixin函数 -->
        mixins:[BindingMixin],
        getInitialState:function(){
              return {
                contentText:'',
                password:''
              }
        },
        render: function(){
          return (
         <form>
            
              <input type="text" placeholder="说点什么吧" onChange={this.changContent('contentText')} />
              <p>{this.state.contentText}</p>

              <textarea onChange={this.changContent('password')} ></textarea>
              <p>{this.state.password}</p>
          </form>
          )     
        
        }
    });
      <!-- 用于将模板转为HTML语言并插入指定的DOM节点 -->
      ReactDOM.render(
       <HelloMessage />,
       document.getElementById('example')
      );
     
    </script>
  </body>
</html>

组件嵌套+Mixin函数demo的更多相关文章

  1. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

  2. 5. React 组件的协同使用 组件嵌套和Mixin

            组件是React的核心,构建大型项目时多个组件之间需要进行协同使用.可以从横向和纵向两个角度来实现组件的协同使用,纵向的协同使用就是组件嵌套,横向的协同使用就是Mixin(抽取公共方法 ...

  3. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  4. 微信开源组件WCDB漫谈及Demo

    代码地址如下:http://www.demodashi.com/demo/12422.html 前言 移动端的数据库选型一直是一个难题,直到前段时间看到了WeMobileDev(微信前端团队)放出了第 ...

  5. React 三大属性state,props,refs以及组件嵌套的应用

    React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...

  6. [前端随笔][Vue] 多级菜单实现思路——组件嵌套

    说在前面 本篇记录学习了vue-element-admin中的多级菜单的实现 [传送门] @vue/cli 4.2.2:vuex:scss:组件嵌套 正文 创建项目 npm create 项目名 // ...

  7. 【React】学习笔记（一）——React入门、面向组件编程、函数柯里化

    课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...

  8. Vue.js多重组件嵌套

    Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...

  9. React入门---组件嵌套-5

    组件嵌套 我们现在需要组件嵌套,所以要创建其他组件,目前有一个头部组件,在./components/header.js; 接下来在components文件中创建:底部组件footer.js 和主体组件 ...

随机推荐

  1. 二十四、JDK1.5新特性---泛型

    由于本人认知有限,泛型在使用上没有太大压力,但是尚未具备详细介绍泛型的能力,因此本文只是粗略的描述泛型的相关知识,在以后的学习过程中会对这篇文章进行修改,希望这篇文章不会给读者带来迷惑,特此声明 什么 ...

  2. Java线程间通信方式剖析——Java进阶（四）

    原创文章,同步发自作者个人博客,转载请在文章开头处以超链接注明出处 http://www.jasongj.com/java/thread_communication/ CountDownLatch C ...

  3. 解决ADB server didn't ACK问题，连上手机问题

    出现如下情况 ADB server didn't ACK* failed to start daemon * 解决办法: 方法一: (1)查看任务管理器,关闭所有adb.exe,或者运行->cm ...

  4. 阐述ArrayList、Vector、LinkedList的存储性能和特性。

    答:ArrayList 和Vector都是使用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,它们都允许直接按序号索引元素,但是插入元素要涉及数组元素移动等内存操作,所以索引数据快 ...

  5. ES搜索引擎-简单入门

    基本概念: 索引Index es吧数据放到一个或者多个索引中,如果用关系型数据库模型对比,索引的地位与数据库实例(db)相当.索引存放和读取的基本单元是文档(document).es内部使用的是apa ...

  6. input 的blur事件之后button的onclick事件不执行解决方案

    最近发现网页程序中有个BUG,就是在input标签输入框中输入完数据后,直接点击“取消” 按钮的时候.出现网页崩死的情况: 经过小主酸菜我,各种方法的尝试后,找到一个初步可以解决的方案,在这里分享给大 ...

  7. web项目开发规范整理总结

    一.类.函数.变量名命名: 1.定义类时,全部拼音的首字母必须大写:如Person,ClassDemo:(帕斯卡命名法):也可以用带下斜杆的匈牙利命名法进行命名,如    head_navigatio ...

  8. 亚马逊EC2弹性IP收费

    刚收到亚马逊云账单,被扣了4.44刀,吓尿,麻溜的去查账单详情,发现之前弃用的美国实例有个弹性IP没释放掉,占着茅坑还不拉屎,被扣钱宝宝无话可说,赶紧释放... $0.005 per Elastic ...

  9. Maven安装配置使用

    Maven介绍 Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个依赖管理 ...

  10. 自己动手写Logistic回归算法

    假设一个数据集有n个样本,每个样本有m个特征,样本标签y为{0, 1}. 数据集可表示为: 其中,x(ij)为第i个样本的第j个特征值,y(i)为第i个样本的标签. X矩阵左侧的1相当于回归方程的常数 ...