08_组件三大属性(2)_props
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="example1"></div><hr><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/prop-types.js"></script><script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> /* * 需求:自定义用来显示一个人员信息的组件,效果如页面.说明: 1.如果性别没有指定,默认为男 2.如果年龄没有指定,默认为18 * */ //1.定义组件 (简单) /*function Person(props) { return ( <ul> <li>姓名:{props.name}</li> <li>年龄:{props.age}</li> <li>性别:{props.sex}</li> </ul> ) }*/ //1.定义组件(复杂) class Person extends React.Component { render() { console.log(this); return ( <ul> <li>姓名:{this.props.name}</li> <li>年龄:{this.props.age}</li> <li>性别:{this.props.sex}</li> </ul> ) } } //指定属性默认值 Person.defaultProps = { sex: '男', age: 18 }; //指定属性值的类型和必要性 Person.propTypes = { name: PropTypes.string.isRequired, sex: PropTypes.string, age: PropTypes.number }; //2.渲染组件标签 const person = { name: 'Tom', age: 18, sex: '女' }; /* * ...的作用 * 1.打包 * function fn(...as) {} fn(1, 2, 3) * 2.解包 * const arr1 = [1, 2, 3] const arr2 = [6, ...arr1, 9] * */ ReactDOM.render(<Person {...person}/>, document.getElementById('example1')); const person2 = { myName: 'Jack', age: 17 }; ReactDOM.render(<Person name={person2.myName} age={person2.age}/>, document.getElementById('example2'));</script> </body></html>
08_组件三大属性(2)_props的更多相关文章
- 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是组件对象最重要的属性, 值是对象(可以包含多个数 ...
- 09_组件三大属性(3)_refs和事件处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 07_组件三大属性(1)_state
<!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 ...
随机推荐
- 学习笔记之k-nearest neighbors algorithm (k-NN)
k-nearest neighbors algorithm - Wikipedia https://en.wikipedia.org/wiki/K-nearest_neighbors_algorith ...
- HDOJ 2020 绝对值排序
#include<iostream> #include<cmath> #include<algorithm> #include<vector> usin ...
- Jmeter(十一)参数化
有关参数化的概念,前面有篇随笔已经粗略的提到了参数化的一点内容.本篇来主要记录参数化. Jmeter的参数化方式有很多,在此我来一一记录,对待不同个规模.业务模型.数据量来进行记录参数化的方法. 一. ...
- AD中组的概念
- win7右键菜单调整顺序
HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\ Discardable\PostSetup\ShellNew ...
- classpath路径配置
在很多Apache的框架中,经常遇见配置classpath情况,但是都没有认真研究过classpath,下面是对classpath的解析. classpath: 是指编译过后的的classes目录 对 ...
- plugin 看不到update按钮
然后再按一下tab键,焦点就会在 update上了.然后再回车.
- js原生面向对象-仿layui选项卡
喜欢琢磨,给大家分享小编自己封装的仿layui的选项卡. <!DOCTYPE html> <html lang="en"> <head> < ...
- CS229 6.18 CNN 的反向传导算法
本文主要内容是 CNN 的 BP 算法,看此文章前请保证对CNN有初步认识. 网络表示 CNN相对于传统的全连接DNN来说增加了卷积层与池化层,典型的卷积神经网络中(比如LeNet-5 ),开始几层都 ...
- jsfiddle将demo设置为public公开的
jsfiddle的demo虽然可以通过链接分享给所有人,但是进入个人主页是没有的,需要将项目设置为公开public的 根据提示,打开demo项目页==>左侧菜单==>填写标题和描述==&g ...