作者:军魂永驻1971 | 来源:互联网 | 2023-10-13 12:21
知识点:1、react属性的调用this.props.被调用的属性名设置属性的常用方法:varprops{one:123,two:321}调用这个属性:<HelloWorld{props}>说明:{props},这里的三个点,代表props中的所有的属性react状态的调用this.
知识点:
1、react 属性的调用 this.props.被调用的属性名
设置属性的常用方法:
var props = {
one: '123',
two: 321
}
调用这个属性:
说明:{...props},这里的三个点,代表props中的所有的属性
react 状态的调用 this.state
this.getInitialState 默认状态的方法;
this.setState 修改状态的方法(经常用到)
this.setState.被修改的值
场景:修改默认属性名称name的值,并显示效果
1、初始化状态,默认状态
getInitialState: function(){
return {
name: 'tim',
}
}
2、改变状态,就会改变默认的值。给这个默认的值添加修改后获取元素的监听事件 event.target 只要默认值被改变,就会获取到这个改变后的值
handChange: function(event){
this.setState({name: event.target.value});
}
3、调用这个已经改变的状态的属性,显示已经改变的状态
render: function(){
return HelloWorld,改变的值为{this.props.name}
}
基础知识点:
- react.js
- JSXTransformer.js
- console-polyfill.js
- es5-sham.min.js
- es5-shim.min.js
- jquery.min.js
- react 的默认的解析数据,生成JSX代码的方法: render: function(){......}
- 渲染组件的方法: React.render( JSX的代码块 , JSX代码渲染后的存储位置(展示效果的位置))
- JSX(Javascript Xml) 是在JS中编写XML的语言,官方文档:https//facebook.giuhub.io/jsx/
- JSX 首字母大写为自定义组件;首字母小写为DOM元素
- JSX 要注意3个点:元素名、子节点、节点属性
- 所有的html属性与class名称都采用驼峰命名方式:html要写成“htmlFor”; class要写成"className"; 否则会报错
- 写在style标签中的css样式,在react中要以对象的方式引用
- {}大括号里不可以使用Javascript的语句,但可以使用表达式。用表达式来代替语句。
- script标签的type为text/jsx