ES6——面向对象应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
// ...
</script>
</head>
<body>
<!-- ... -->
</body>
</html>
window.onload = function (){
let oDiv = document.getElementById('div1');
ReactDOM.render( //JSX
<span>124</span>,
oDiv
);
};
class Test extends React.Component{
constructor(...args) {
super(...args);
}
render(){
return <span>span123</span>;
}
}
window.onload = function (){
let oDiv = document.getElementById('div1');
//JSX
ReactDOM.render(
<Test></Test>,
oDiv
);
};
2)组件渲染2 —— {表达式}
class Item extends React.Component{
constructor(...args) {
super(...args);
}
render(){
return <li>{this.props.str}</li>;
// 在 JSX 当中你可以插入 JavaScript 的表达式,表达式返回的结果会相应地渲染到页面上。表达式用 {} 包裹。
}
}
window.onload = function (){
let oDiv = document.getElementById('div1');
//JSX
ReactDOM.render(
<ul>
<Item str='111'></Item>
<Item str='111'></Item>
<Item str='111'></Item>
</ul>,
oDiv);
};
3)组件渲染3 —— 组件套组件
class Item extends React.Component{
constructor(...args) {
super(...args);
}
render(){
return <li>{this.props.str}</li>;
}
}
class List extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <ul>
<Item str='111'></Item>
<Item str='111'></Item>
</ul>;
}
} window.onload = function (){
let oDiv = document.getElementById('div1');
//JSX
ReactDOM.render(
<List></List>,
oDiv);
};
4)组件渲染4 —— React传参
class Item extends React.Component{
constructor(...args) {
super(...args);
}
render(){
return <li>{this.props.str}</li>;
}
}
class List extends React.Component{
constructor(...args){
super(...args);
}
render(){
alert(this.props.arr[0]);
return <ul>
<Item str='111'></Item>
<Item str='111'></Item>
</ul>;
}
}
window.onload = function (){
let oDiv = document.getElementById('div1');
//JSX
ReactDOM.render(
// <List arr="['bbb','ppp','ddd']"></List> // 输出:[
<List arr={['bbb','ppp','ddd']}></List>, // 输出:bbb
oDiv
);
};
注意:
React 有两种传参方式 分别是字符串和表达式 其中 只有表达式才可以输出字符串以外的东西,比如,数组...
5)组件渲染4 —— React传参3(映射)
class Item extends React.Component{
constructor(...args) {
super(...args);
}
render(){
return <li>{this.props.str}</li>;
}
}
class List extends React.Component{
constructor(...args){
super(...args);
}
// 还是报错了!
render(){ let aItems = this.props.arr.map(a=><Item str={a}></Item>);
return <ul>
{aItems}
</ul>;
// return <ul>
// {this.props.arr.map(a=><Item str={a}></Item>)}
// </ul>;
}
}
window.onload = function (){
let oDiv = document.getElementById('div1');
//JSX
ReactDOM.render(
<List arr={['bbb','ppp','ddd','fas']}></List>,
oDiv);
};
ES6——面向对象应用的更多相关文章
- ES6面向对象 动态添加标签页
HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...
- JS - ES5与ES6面向对象编程
1.面向对象 1.1 两大编程思想 1.2 面向过程编程 POP(Process-oriented programming) 1.3 面向对象编程 OOP (Object Oriented Progr ...
- ES6 面向对象笔记
JS面向对象两大编程思想 面向过程 面向对象 面向过程编程POP 面向过程就是分析出问题的需要步骤,然后用函数一步一步的实现,使用的时候一个一个调用就可以了 面向对象编程OOP ...
- ES6面向对象实现tab栏切换效果
面向对象实现tab栏切换效果
- ES6——面向对象-基础
面向对象原来写法 类和构造函数一样 属性和方法分开写的 // 老版本 function User(name, pass) { this.name = name this.pass = pass } U ...
- es6面向对象
<script> class user{ constructor(name,age){ this.name=name; this.age=age; } showName(){ alert( ...
- es6 面向对象选项卡(自动轮播功能)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 粗看ES6之面向对象写法
标签: es6 在es6以前,js没有类的概念,虽然有构造函数原型的方式用来做面向对向开发,但是对于书法并不是十分友好,而且对于继承实现也不是十分友好. es6引入class constructor ...
- ES6新增语法(四)——面向对象
ES6中json的2个变化 简写:名字和值相同时,json可以可以简写 let a=12,b=5; let json = { a, b } console.log(json) // { a:12 , ...
随机推荐
- k-means原理和python代码实现
k-means:是无监督的分类算法 k代表要分的类数,即要将数据聚为k类; means是均值,代表着聚类中心的迭代策略. k-means算法思想: (1)随机选取k个聚类中心(一般在样本集中选取,也可 ...
- SQL SERVER 数据库如何限制一列不能重复(已经有主键)
ALTER TABLE 表名ADDCONSTRAINT 约束名 UNIQUE (列名) -------------------------------------------------------- ...
- vue多层传递$attrs
今天在使用$attrs的时候遇到一个问题: 父组件: <PanelContainer name="正向舆情"> <PositiveOpinion opinion= ...
- 文件/大文件上传功能实现(JS+PHP)全过程
PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本 ...
- js解决手机键盘影响定位的问题
// 滑动其他地方隐藏软键盘document.body.addEventListener('touchend', function(evt) { document.activeElement.blur ...
- matplotlib中中文字体配置
解决方式1:利用matplotlib的字体管理工具font_manager---->缺点:每次必须要进行设置 import matplotlib.pyplot as plt from matpl ...
- C. Anna, Svyatoslav and Maps
C. Anna, Svyatoslav and Maps 给定一个有向图,给定一条有向路径,求一条顶点最少的路径,使得给定的路径是它的最短路 folyd预处理出任意两点间的最短路,然后判断是否可以缩点 ...
- B - Sumdiv(第三周)
B - Sumdiv 题目链接:https://vjudge.net/contest/154063#problem/B 题意: 求A^B的所有约数(即因子)之和,并对其取模 9901再输出. 解题思路 ...
- Swift权限控制
最后更新:2017-03-20 private: 只能在当前类里面访问 fileprivate: 只能在当前文件内访问 internal:internal访问级别所修饰的属性或方法在源代码所在的整个模 ...
- SVM 笔记整理
支持向量机 一.支持向量机综述 1.研究思路,从最特殊.最简单的情况开始研究 基本的线性的可分 SVM 解决二分类问题,是参数化的模型.定义类标记为 \(+1\) 和 \(-1\)(区别于感知机,感知 ...