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 ...
随机推荐
- 定位cpu内存问题
定位cpu内存问题 ps -Hp pid 显示进程的线程,P 按CPU内存排序 jstack pid>pid.log 将线程栈 dump 到日志文件中 线程号 十进制转换为 十六进制 在文件中 ...
- html地址--待更新
11.学习笔记: 视频直播技术:ijkplayer技术:jni技术: https://www.cnblogs.com/renhui/category/1011048.html: IM:环信, xmpp ...
- [UE4]如何编译部署独立专用服务端(Standalone Dedicated Server)
这是论坛上对UE服务端功能的回答,意思是UE4提供了网游服务端所具备的特性,包括位移修正.物理碰撞检测.这些特性不是UE4才加入,早期UE版本就有了. https://answers.unrealen ...
- quicktime player录屏没有声音的解决方法
作者:殊哥链接:https://www.zhihu.com/question/20251726/answer/94938941来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- typescript静态属性,静态方法,抽象类,多态
/* 1.vscode配置自动编译 1.第一步 tsc --inti 生成tsconfig.json 改 "outDir": "./js", 2.第二步 任务 ...
- 移动端动态font-size
/** * Created by shimin on 2017/8/18. *///计算dpr!function(win, lib) { var timer, doc = win.document, ...
- webpack 配置案例for angular babel
1.dev.js: const webpack = require('webpack'); const webpackUglifyJsPlugin = require('webpack-uglify- ...
- CSS中可以继承和不能继承的属性
一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...
- C#常用类操作
C#提供了许多可以直接使用的类代码. 1. Convert类 Convert类提供了很多静态方法成员,用于实现数据类型的转换. Convert类的常用方法 ...
- 查看linux文件目录的大小和文件夹包含的文件数
du -h --max-depth=|sort -n du -h --max-depth=|grep G|sort -n df -h 清理/var/log # 清除 # 一定要以root身份来运行这个 ...