第三节,createClass创建标签类，并获取插入属性

最新推荐文章于 2018-07-16 18:08:24 发布
最新推荐文章于 2018-07-16 18:08:24 发布
阅读量526 收藏
点赞数
分类专栏： ECMAScript 6笔记(javascirpt的下一版) 文章标签： javascript
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="example4"></div>
<script type="text/babel">
let HelloMessage = React.createClass({              //let是ECMA6的声明变量，用它所声明的变量， 只在let命令所在的代码块内有效。  
render : function(){   //在渲染的时候放回一个标签
return <h1>hello {this.props.name}</h1>;    //this.props.name 获取标签的属性
}
});


ReactDOM.render(
<HelloMessage name="天气"  />,                  //把HelloMessage作为标签插入到元素中
document.getElementById('example4')
);
</script>
<div id="ex1"></div>
<script type="text/babel">
let HelloWorld = React.createClass({
render : function(){
return <h2>hello {this.props.name1} , {this.props.name2}</h2>;  //同时获取两个标签的属性
}
})


let props = {
name1 : '赵一',
name2 : '李四',
};
ReactDOM.render(
<HelloWorld {...props} />,   //  ...是ECMA6的扩展操作符，可以直接展开数组或者类数组
document.getElementById('ex1')
);
</script>
</body>
</html>
daily886
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React源码分析2 — 组件和对象的创建（createClass，createElement）
谢杨易的博客
02-18 1万+
1 组件的创建React受大家欢迎的一个重要原因就是可以自定义组件。这样的一方面可以复用开发好的组件，实现一处开发，处处调用，另外也能使用别人开发好的组件，提高封装性。另一方面使得代码结构很清晰，组件间耦合减少，方便维护。ES5创建组件时，调用React.createClass()即可. ES6中使用class myComponent extends React.Component, 其实内部还是调
createClass:提供简单快速创建可维护、可扩展的（继承、重写）类的方法
07-17
createClass 提供简单快速创建可维护、可扩展的（继承、重写）类的方法 使用方法 方法说明 /* * @param Function `constructor` 类的构造体函数 * @param Object `prototype` 将会扩展到原型上的一组对象方法 * @param Function `parentConstructor` 要继承的父类，支持多继承（多继承情况下第一个出现的父类会作为默认原型） * * @return Class 返回包装好的类，可以通过new来实例化类对象；也可以省略new操作符 * * 类方法支持 private、static 等关键词声明，参加下方例子。使用该关键词的方法在相关使用时会被优先调用：一个类声明了两个同名方法，一个使用了private关键声明为私有方法；则内部调用时会执行私有方法，外部调用会执行公有方法。 * 子类方
React.createClass()方法
祥哥的说
02-28 1万+
react组件 -- React.createClass()方法1、React.createClass()方法用于生成一个组件类2、所有组件类都必须有自己的render方法，用于输出组件3、假如生成一个组件类HelloMessage，模板插入&lt;HelloMessage /&gt;时，会自动生成组件类HelloMessage的一个实例4、组件类的第一个字母必须大写，否则会报错，比如HelloW...
解剖react组件的多种写法与演进
weixin_30677475的博客
08-22 221
目前，react组件有三种写法，分别是es5的createClass写法，es6的class写法，以及stateless(无状态组件)写法。 下面由浅入深来细说这三种写法。涵盖了生命周期，反向数据流，es6/7等知识。 一，原始的createClass写法 对于写react组件，很多人第一印象往往是createClass，这是因为createClass是react组件最原始的写法，基本每个学...
React.createClass({})
lncci的博客
07-16 1287
eact组件 -- React.createClass()方法 1、React.createClass()方法用于生成一个组件类 2、所有组件类都必须有自己的render方法，用于输出组件 3、假如生成一个组件类HelloMessage，模板插入&lt;HelloMessage /&gt;时，会自动生成组件类HelloMessage的一个实例 4、组件类的第一个字母必须大写，否则会报错，比...
React.createClass和extends Component的区别
hsany330的专栏
07-24 455
createClass本质上是一个工厂函数，extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。createClass方式的方法定义使用逗号,隔开，因为creatClass本质上是一个函数，传递给它的是一个Object；而class的方式定义方法时务必谨记不要使用逗号隔开，这是ES6 class的语法规范。 Reac
.net c#动态创建程序集、类、属性、方法等
11-12
三、动态创建属性和方法 1. 动态创建属性：使用TypeBuilder的DefineProperty方法，指定属性的名称、类型、属性修饰符（如public、private）、属性访问器（getter、setter）。然后，分别为这些访问器创建方法，如...
CreateClass_net c#动态创建程序集、类、属性、方法等
04-01
接下来，我们将讨论动态创建属性。`PropertyBuilder`允许我们在运行时定义属性，包括其访问器（getter和setter）。我们可以通过`PropertyBuilder.SetGetMethod()`和`PropertyBuilder.SetSetMethod()`来指定对应的...
createClass:在 JavaScript 中使用类的简单方法
06-11
创建类createClass - 在 JavaScript 中使用类的简单方法。例子在测试中查看更多示例。简单的 var SomeClass = createClass({ myProperties: 123, myMethod: function() { return this.myProperties; }});var obj = ...
createClass:这是一个CMD模块，建议使用seajs加载调用该模块提供的功能。该模块抛出了一个函数：createClass(conf)，通过该函数可以创建一个javascript类（构造函数），该函数实现了类的（多）继承、私有变量的管理。通过该函数创建的类的实例，都会拥有三个共同的方法：setAttr()、setAttr()、instanceOf()，前两个方法是对实例的私有属性的管理，instanceOf()方法是判断继承关系
06-04
通过该函数创建的类的实例，都会拥有三个相同的方法：setAttr()、setAttr()、instanceOf()，前两个方法是对实例的私有属性的管理，instanceOf()方法是判断继承关系。 使用方法 创建类/构造函数 seajs.use('./dist/...
react---react组件创建，通过React.createClass方法与class App extends Component方法的区别
Wbiokr的博客
06-11 4663
createClass本质上是一个工厂函数，extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。createClass方式的方法定义使用逗号,隔开，因为creatClass本质上是一个函数，传递给它的是一个Object；而class的方式定义方法时务必谨记不要使用逗号隔开，这是ES6 class的语法规范。React.creat
笔记——document.createElement创建添加属性
热门推荐
shiki0083的笔记
05-16 3万+
动态添加div中，需要进行添加id，class，style等属性做下记录[javascript] view plain copyvar div = document.createElement('div');  div.id = 'mask_div1';  div.className = 'mask';  div.appendChild(document.createTextNode("test"...
JS中document.createElement()的用法
【Erica W】有问题，就问神奇海螺吧！
11-12 1万+
分析代码时，发现自己的盲点——document.createElement()，冲浪一番，总结了点经验。 document.createElement()是在对象中**创建一个对象**，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插
React入门 createClass使用说明
lixingshi的专栏
12-24 4967
在使用React.createClass之前，我们先来看官方给出的解释 ReactClass createClass(object specification) 创建一个给出说明的组件类（这个给出的说明也就是其参数 object specification）。这个组件实现一个render方法，并且render方法返回一个单一的节点。这个返回的节点可能包含任意深度的子节点结构。该方法与标准的原型
createClass方法
08-08 184
1、getInitialState 用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。 2、getDefaultProps() 方法为 props 设置默认值 转载于:https://www.cnblogs.com/LLMjiayou7/p/7305001.html...
linux中class_create和class_register说明
angle_birds的专栏
11-18 2万+
本文介绍linux中class_create和class_register的相关使用方法 1 class结构体介绍     内核中定义了struct class结构体，顾名思义，一个struct class结构体类型变量对应一个类，内核同时提供了class_create(…)函数，可以用它来创建一个类，这个类存放于sysfs下面，一旦创建好了这个类，再调用device_create(…
React 语法一：React.createClass()、ReactDOM.render()、props、state和componentDidMount()
JimmyLuo17的博客
01-18 1418
初级语法这些内容是我学习fullstack-react-book一书，自己翻译整理出来的要点。React.createClass() 为了创建一个react组件，我们在react中使用React.createClass()方法。 render()对于react组件来说是唯一必要的方法。 另外一种定义react组件的方式是使用ES6的继承，具体语法为class ProductList extends
React.createClass is not a function
shaleilei的博客
01-10 1万+
首先不知道你是否安装了react和react-dom包，没有安装的话终端安装下：命令行如下 cnpm install --save react react-dom 里面的--save表示的为开发环境，我们开发的时候称为开发环境，提交到线上以后称为生产环境；如果还不行继续看下面的重点（PS：一般人上面都安装了）； 这个是因为react最新版本抛弃使用了createClass这个函数，这个也是为
react.createclass
最新发布
05-19
在 React v16.0.0 及之后的版本中，推荐使用 ES6 的类语法来创建组件，例如： ```javascript class MyComponent extends React.Component { render() { return <div>Hello, {this.props.name}!; } } ``` 这样做...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值