基于react的事件绑定和jsx语法用法编写

1.数据绑定语法：{}

 定义一个数据，React中的所有绑定语法只有一个是单花括号：{}，没有指令，包括注释都是一个花括号

绑定语法一定得到一个结果，可以是一个方法赶回一个值

绑定对象的值也是直接{}单花括号语法

jsx的注释:{ /* */} =>单花括号里面是多行注释

一旦使用了{}语法。在语法里直接可以编写js代码

2.遍历渲染：谁遍历加key

遍历渲染=>是需要得到一个数据对象，React中要求list中每一个元素都是必须有一个key属性以及值

使用map直接遍历 :{list.map(it=>{return( <li  key={it.id}  >}) })}

条件渲染： jsx对象中使用{}语法，可以直接执行js代码

在jsx表达式中只能一个父元素 使用三目运算来实现条件渲染

或，与，if

3.事件绑定：

 

4.页面节点获取：

5.组件内部数据管理对象 --state

 在react中只有两种数据：

 一个是组件内部数据-- 称为state数据（当前组件的状态数据），还有一个是组件外部数据

  类组件的render方法只有这两种数据的更新会触发

定义state，在构造函数中必须先调用super()方法，名字必须是state，在使用的时候：this.state.定义的key

 

6.类组件传值数据管理对象 -- props

  父传子：通过props来进行传递，在父组件中可以使用属性绑定（可以使用展开运算符进行多个属性绑定），

在子组件中使用this.props来接收数据，可以传递一切数据

 子传父：通过事件回调方法，在父组件中给子组件元素绑定一个方法属性，然后在子组件中直接调用这个方法来进行数据传递

2.组件传值数据类型管理 --prop-types

  安装一个社区库：yarn add prop-types/cnpm i -S prop-types

这个是一个检查数据类型的参数变量的接收。直接可以定义当前组件接收的数据类型，来是否决定必传或者默认值的一些设置。

注意引入时的bug问题需要以驼峰命名语法声明对象库，否则会报错语法错误

import propTypes from 'prop-types'   //定义声明时注意第一个首字母小写，二个单词首字母大写，不可以写成PropTypes的声明