react组件选项卡demo
<!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的更多相关文章
- webpack 打包一个简单react组件
安装Webpack,并加载一个简单的React组件 全局的npm模块安装: npm install -g webpack 安装jsx-loader npm install --save-dev jsx ...
- React组件开发
目录: 属性:props 内联样式 状态记忆 : state 生命周期 访问DOM 表单输入 承接快速入门篇:http://www.cnblogs.com/jasonnode/p/4444504.ht ...
- React组件开发入门
React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...
- 如何优雅的设计 React 组件
作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家 ...
- 如何优雅的设计React组件
如何优雅的设计 React 组件 如今的 web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家会觉得 j ...
- React组件性能调优
React是一个专注于UI层的框架,它使用虚拟DOM技术,以保证它UI的高速渲染:使用单向数据流,因此它数据绑定更加简单:那么它内部是如何保持简单高效的UI渲染呢?这种渲染机制有可能存在什么性能问题呢 ...
- 从工程化角度讨论如何快速构建可靠React组件
前言 React 的开发也已经有2年时间了,先从QQ的家校群,转成做互动直播,主要是花样直播这一块.切换过来的时候,业务非常繁忙,接手过来的业务比较凌乱,也没有任何组件复用可言. 为了提高开发效率,去 ...
- 在线代码编辑器 Codemirror 的轻量级 React 组件
代码编辑器 CodeMirror 的轻量级 React 组件 demo @uiw-react.github.io/react-codemirror/ 特性:
- React组件中对子组件children进行加强
React组件中对子组件children进行加强 问题 如何对组件的children进行加强,如:添加属性.绑定事件,而不是使用<div>{this.props.children}< ...
随机推荐
- Unity Shader 基础（3） 获取深度纹理
Unity提供了很多Image Effect效果,包含Global Fog.DOF.Boom.Blur.Edge Detection等等,这些效果里面都会使用到摄像机深度或者根据深度还原世界坐标实现各 ...
- 【Linux基础】VI 编辑器基本使用方法
vi编辑器是所有Unix及Linux系统下标准的编辑器.对Unix及Linux系统的任何版本,vi编辑器是完全相同的,它是Linux中最基本的文本编辑器. 第一章vi的三种模式 第二章vi文本编辑器 ...
- wangedit
<template> <el-row id="AddRoom"> <el-col :span="5">.</el-co ...
- SICP 习题 （1.43）解题总结
SICP 习题 1.43 是前面两道题的延续,习题要求我们定义一个过程(repeat f n) .当中f是一个单參数过程.题目要求我们通过repeat过程将过程f调用n次,注意是嵌套调用n次,不是连续 ...
- centos7下安装docker（26如何配置Health Check）
Docker只能从容器启动进程的返回代码判断其状态,而对于容器内部应用的运行状况基本没有了解 执行docker run命令时,通常根据dockerfile中的CMD或ENTRYPOINT启动一个进程, ...
- CentOS自带定时任务crontab
设置定时任务规则,crontab -e,如下示例为每一分钟执行一次脚本 在脚本中写入内容时需注意路径,可以写绝对路径,也可以按照如下形式 exepath=$(cd "$(dirname &q ...
- bzoj-1787-洛谷-4281（LCA板子题）
传送门(bzoj) 传送门(洛谷) 可以说这道也是一个板子题 由于题中是三个人需经过的路径最短 就会有一点点不太一样 那么 就两两求LCA 这样之后就会出现两种状况 一.所得到的三个LCA是相等的 那 ...
- Generative Adversarial Nets[AAE]
本文来自<Adversarial Autoencoders>,时间线为2015年11月.是大神Goodfellow的作品.本文还有些部分未能理解完全,不过代码在AAE_LabelInfo, ...
- Java线程和多线程（十五）——线程的活性
当开发者在应用中使用了并发来提升性能的同时,开发者也需要注意线程之间有可能会相互阻塞.当整个应用执行的速度比预期要慢的时候,也就是应用没有按照预期的执行时间执行完毕.在本章中,我们来需要仔细分析可能会 ...
- 【C#复习总结】 Async 和 Await 的异步编程
谈到异步,必然要说下阻塞,在知乎上看到了网友举的例子非常省动,在这里我引用下. 怎样理解阻塞非阻塞与同步异步的区别? 老张爱喝茶,废话不说,煮开水. 出场人物:老张,水壶两把(普通水壶,简称水壶:会响 ...