07_组件三大属性(1)_state
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_componment_basic</title>
</head>
<body>
<div id="example1"></div>
<div id="example2"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//一、.定义组件
//方式1:工厂函数组件(简单组件)
function MyComponent() {
return <h2>工厂函数组件(简单组件)</h2>
}
//方式2:es6类组件(复杂组件)(通过创建MyComponent2的实例调用render方法)
class MyComponent2 extends React.Component {
render() {
console.log(this);
return <h2>es6类组件(复杂组件)</h2>
}
}
//二、渲染组件标签
ReactDOM.render(<MyComponent/>, document.getElementById('example1'));
ReactDOM.render(<MyComponent2/>, document.getElementById('example2'));
</script>
</body>
</html>
07_组件三大属性(1)_state的更多相关文章
- React组件三大属性之 refs
React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => ...
- React组件三大属性之 props
React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...
- React组件三大属性之state
React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...
- 08_组件三大属性(2)_props
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 09_组件三大属性(3)_refs和事件处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 组件的三大属性state，props，refs与事件处理
组件的三大属性state state是组件对象最重要的属性, 值是对象(可以包含多个数据),组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 初 ...
- React 三大属性state,props,refs以及组件嵌套的应用
React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...
- React组件的属性
组件的三大属性 state props refs 写组件的要求: 1>组件必须大写 2>组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件 ...
- vue-learning：29 - component - 组件三大API之三：slot
组件三大API之三: slot <slot>标签 v-slot指令 普通插槽 有默认值的插槽 具名插槽 作用域插槽 v-slot是Vue 2.6.0引入的一个新语法指令,目的是统一之前sl ...
随机推荐
- Linux下设置固定IP的方法
本文转自http://blog.163.com/liulina_517@126/blog/static/3766198320118231431594/ linux系统安装完,以后通过命令模式配置网卡I ...
- openVPN设置本地密码验证
wget https://git.io/vpn -O openvpn-install.sh && bash openvpn-install.sh https://github.com/ ...
- Android：防止过快点击造成多次事件 问题
自定义一个NoDoubleClickListener,继承自OnClickListener: public abstract class NoDoubleClickListener implement ...
- sp_settriggerorder 设置触发器执行顺序
sp_settriggerorder (Transact-SQL) 本主题适用于:SQL Server(从 2008 开始)Azure SQL 数据库Azure SQL 数据仓库并行数据仓库 ...
- 第8章 传输层（2）_UDP协议
2. 用户数据报协议(UDP) 2.1 UDP的特点 (1)UDP是无连接的,即发送数据之前不需要建立连接,因此减少了开销和发送数据之前的时延. (2)UDP使用了尽最大努力交付,即不保证可靠交付,因 ...
- python r（不进行转义）的用法
第一种用法,直接针对字符串:r‘E:\ui\bbq.txt’ 第二种用法,针对变量名:r'' + 变量名
- Missing artifact javax.transaction:jta:jar:1.0.1B
下载https://pan.baidu.com/s/1hsfyj8S到某目录,比如: /Users/yintingting/Downloads 打开terminal,cd /Users/yinting ...
- gentoo rt-thread scons --menuconfig libs/lxdialog/util.o: undefined reference to symbol 'nodelay'
今天在另外一台电脑上面使用 rt-thread 的 env 工具,scons --menuconfig 出现错误,提示如下: scons: Reading SConscript files ... s ...
- JAVA 本地序列化。
HashMap map = new HashMap(); map.put("province", "北京"); map.put("coding&quo ...
- Strandbeest mechanism and Leg mechanism
I have to say besides computer science study, I'm also interested in Leg mechanism. Share two keywor ...