搭建React开发环境
1.安装官方脚手架
npm i -g create-react-app
2.创建项目
create-react-app 项目名(小写)
3.启动项目
npm start
JSX基础语法
1.XML基本语法
只允许一个标签包裹
标签一定要闭合
2.元素类型
小写首字母对应DOM元素
大写首字母对应组件元素
注释使用js注释方法
3.元素属性
class属性改为className
for属性改为htmlFor
Boolean:省略Boolean属性值会导致JSX认为bool值默认为true
4.js属性表达式
属性值要使用表达式 用 {} 替换 **" "**即可
<input type="text" value={val?val:" "}>
5.this指向
谁调用的this就指向谁。
es6箭头函数指向父层。
大部分你看不出谁调用的都是指向windows的
用ES6 箭头函数 this则不会出现指向问题
ES5 正常函数 可用 .bind(this) 进行 this指向改变
例:
this.handleInputChange = this.handleInputChange.bind(this);
this.handBtnClick = this.handBtnClick.bind(this);
this.handleDelete = this.handleDelete.bind(this);
引用时时直接写 this. 函数名 (函数需定义,正常写即可)
6.state,Props
state:
state是组件内部的状态(数据),不能够直接修改,
必须要通过setState来改变值的状态,
从而达到更新组件内部数据的作用。
props:
props是指组件间传递的一种方式,props自然也可以传递state。
由于React的数据流是自上而下的,所以是从父组件向子组件进行传递
另外组件内部的this.props属性是只读的不可修改!
组件内可以通过props来获得属性值
State和Props:
咱们可以通过在父组件当中设置State,
然后通过在子组件上使用props来接收收父组件的state值。
7.组件传值
父组件通过属性的方式向子组件传递参数
子组件通过props来接收父组件传递过来的参数
子组件通过调用付父组件传给子组件的方法给父组件传值
例:
父组件:
class TodoList extends Component{
constructor(props){
super(props);
this.state={
List:[],
inputValue:''
}
this.handleInputChange = this.handleInputChange.bind(this);
this.handBtnClick = this.handBtnClick.bind(this);
this.handleDelete = this.handleDelete.bind(this);
}
// 按钮
handBtnClick(){
this.setState({
List:[...this.state.List,this.state.inputValue],
inputValue:''
})
}
// 输入框
handleInputChange(e){
this.setState({
inputValue:e.target.value
})
}
// 子组件通过调用付父组件传给子组件的方法给父组件传值
handleDelete(key){
const List = [...this.state.List];
List.splice(key,1);
this.setState({List})
}
getTodoTtems(){
return(
this.state.List.map((item,index)=>{
// 父组件通过属性的方式向子组件传递参数
return (
<TodoItem // 子组件组件名称
Delete={this.handleDelete}
key={index}
content={item}
index={index}
/>
)
})
)
}
render(){
// JSX语法
return (
<div>
<input value={this.state.inputValue} onChange={this.handleInputChange} />
<button onClick={this.handBtnClick}>add</button>
<ul>{this.getTodoTtems()}</ul>
</div>
);
}
}
子组件:
class TodoItem extends Component{
constructor(props){
super(props)
this.handleDelete = this.handleDelete.bind(this);
}
handleDelete(){
// 子组件通过调用父组件传给子组件的方法给父组件传值
this.props.Delete(this.props.index)
console.log(this.props.index)
}
render(){
const { content } = this.porps;
return(
// 子组件通过props来接收父组件传递过来的参数
<li onClick={this.handleDelete}>{content} </li>
)
}
}