<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="../node_modules/react/umd/react.development.js"></script>

    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>

    <script src="../node_modules/babel-standalone/babel.js"></script>

</head>

<body>

    <div id="app">

    </div>

    <script type="text/babel">

        let arr = [1,2,3,4];

        // 根组件默认拿到全局变量为data的值 在子组件传值直接传值进行调用

       class List3 extends React.Component{//必须是大写的首字母

           constructor(props){ //构造函数传参

               super(props);    //调用所有原型上的属性来实现props传值

               this.state = {

                   n:0

               }

           }

           inc(ind){

                // 当调用时不绑定this时,this指向调用的window,由于是严格模式所以指向undefined

                   this.setState({

                       n:ind

                   })

               };

           render(){

               console.log(this);//符号必须是分号不能是逗号

               let {data} = this.props;

               let {n} = this.state;

               return(

                            data.map((item,index)=>{

                            return (

                                <div key={index} style={{color:n===index?'red':null}}

                                onClick={this.inc.bind(this,index)}>{item}</div>

                                //这里的this指向的是实例 但在再调用时 由于是window.onclick调用

                                // 导致内部this.setState拿不到this指向。又由于es6严格模式所以不会指向winodow而是undefined

                                // 所以就会报错 不存在这个属性

                            )

                        }

                    )

               )

           }

       }

       ReactDOM.render(

           <div>

                <List3 data={arr}/>

           </div>,

           document.getElementById('app')

       )

    </script>

</body>

</html>

react组件选项卡demo的更多相关文章

  1. webpack 打包一个简单react组件

    安装Webpack,并加载一个简单的React组件 全局的npm模块安装: npm install -g webpack 安装jsx-loader npm install --save-dev jsx ...

  2. React组件开发

    目录: 属性:props 内联样式 状态记忆 : state 生命周期 访问DOM 表单输入 承接快速入门篇:http://www.cnblogs.com/jasonnode/p/4444504.ht ...

  3. React组件开发入门

    React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...

  4. 如何优雅的设计 React 组件

    作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家 ...

  5. 如何优雅的设计React组件

    如何优雅的设计 React 组件 如今的 web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家会觉得 j ...

  6. React组件性能调优

    React是一个专注于UI层的框架,它使用虚拟DOM技术,以保证它UI的高速渲染:使用单向数据流,因此它数据绑定更加简单:那么它内部是如何保持简单高效的UI渲染呢?这种渲染机制有可能存在什么性能问题呢 ...

  7. 从工程化角度讨论如何快速构建可靠React组件

    前言 React 的开发也已经有2年时间了,先从QQ的家校群,转成做互动直播,主要是花样直播这一块.切换过来的时候,业务非常繁忙,接手过来的业务比较凌乱,也没有任何组件复用可言. 为了提高开发效率,去 ...

  8. 在线代码编辑器 Codemirror 的轻量级 React 组件

    代码编辑器 CodeMirror 的轻量级 React 组件 demo @uiw-react.github.io/react-codemirror/ 特性:

  9. React组件中对子组件children进行加强

    React组件中对子组件children进行加强 问题 如何对组件的children进行加强,如:添加属性.绑定事件,而不是使用<div>{this.props.children}< ...

随机推荐

  1. MySql 中文写入数据库乱码及Incorrect string value: '\xF0\x9F...' for column 'XXX' at row 1解决

    一.中文写入乱码问题 我输入的中文编码是 urf8 的,建的库是 urf8 的,但是插入MySQL总是乱码,一堆"???????????????????????".可以使用以下的方 ...

  2. 17秋 软件工程 团队第五次作业 Alpha

    题目:团队作业--Alpha冲刺 17秋 软件工程 团队第五次作业 Alpha 12次Scrum 第一次Scrum 第二次Scrum 第三次Scrum 第四次Scrum 第五次Scrum 第六次Scr ...

  3. 【汤鸿鑫 3D太极】5年目标规划（基本功、套路、实战搏击）

    [5年目标]在基本功的基础上,每年完成一个套路或实战搏击的学习研究. [中小学2年]三段九节 + 2套路. [高中的3年]太极十三势 + 1套路 + 推手 + 搏击. 1.中小学阶段-可自学 (1)基 ...

  4. 超简单的gif图制作工具

    测试成功了: 软件灵者Gif录制1.0 使用方法注意: 扩展: 安卓端想要制作gif可参考此方法(还没测试):https://blog.csdn.net/u012604745/article/deta ...

  5. props default 数组／对象的默认值应当由一个工厂函数返回

    export default {props: { slides:{ type:Array, default:[] } },这是我的代码 报错是Invalid default value for pro ...

  6. 使用IntelliJ IDEA和Maven管理搭建Web开发环境（以Spring MVC为例）（二）

    前言:在使用IntelliJ IDEA和Maven管理搭建Web开发环境(以Spring MVC为例)(一)中已经介绍了如何对web基础环境进行搭建,这里主要演示,如何对spring环境进行搭建,然后 ...

  7. Redis 的安装 使用 通知事件

    Redis 的安装 使用 介绍: redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string.list.set.zset(sorted ...

  8. Linux的目录结构--一切从根开始

    Linux目录结构的特点 # 举例-linux下面使用光盘 ###.把光盘放入到光驱中 ###.linux中使用光盘 /dev/cdrom [root@oldboyedu- ~]# ll /dev/c ...

  9. 笔记-Android中打开各种格式的文件（apk、word、excel、ppt、pdf、音视频、图片等）

    打开后缀.apk的文件.即启动安装程序. //apkFilePath 文件路径 public void installAPK(String apkFilePath) { // 创建URI Uri ur ...

  10. MySQL 主主配置

    一.准备 1.两个数据库版本最好保持一致(因为官方就是这么建议的,主要的问题就是考虑到兼容性问题) 2.连个数据库的数据保持一致,若不一致,可手动调整,比如A比B多一个库,那就将这个库导入到B库,达到 ...