注意事项:
组件类的名称首字母必须大写,否则报错。组件类中的模板只能有一个顶层标签,否则报错。组件标签上class属性改成className for属性改成htmlFor
使用React.createClass({})生成组件类
组件标签上可以任意添加属性 在组件类中使用this.props获取组件标签上的属性。
This.props.children是组件标签子节点构成的集合
当没有子节点 这个值是undefined 1个子节点 值是object 多个子节点是array。
用数组方法map遍历对前两种情况就不起作用,react专门提供了一个叫React.children.map的方法用于遍历this.props.children
这个方法是用来设置组件属性的默认值
在react的节点上添加事件 使用驼峰法
后面绑定的事件函数必须写在{}里 定义事件函数直接写在组件类身上就行。
表单中的值不能使用this.props读取,表单中的内容用户和组件的互动。
而要定义一个 onChange 事件的回调函数,通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况
React的生命周期分三个状态分别是mount update unmount
三个状态中有五个钩子函数
componentDidMount() 组件加载到页面以后 往往是ajax
componentDidUpdate() 组件更新完成以后
定义组件的方法
1:
定义的组件中的method中的this指向组件本身
2.构造函数
定义的组件是无状态的,没有state状态,没有生命周期,不能访问this。就是一个纯粹的静态页面.
3.class
在class定义组件中添加state状态
在事件成员函数中如何修改state呢
5.怎么访问state
在模板中直接使用this.state.属性 就可以了
Props
组件标签上的属性,都记录在定义组件中一个props属性上
如何访问props
Refs属性
通过操作虚拟dom来获取真实dom。
如何获取真实dom
第一种 ref后面是字符串
1.给想要获取的元素身上加ref属性
Aa这个值就会在refs对象中充当一个属性 属性值是dom元素
第二种
2.第二种 ref后面是一个箭头函数
H3xx是一个临时存放dom元素的属性,在个属性直接挂载在组件对象上
原文:https://www.cnblogs.com/yangjingyang/p/11574731.html