首先创建react的脚手架 具体创建步骤自己查
首先创建一个todelist 在src下创建一个components文件夹 里面创建一个todo的文件夹 todo里面创建一个index.js文件这里是父组件 在里面写
此处只是做一个小例子演示下react的组件化
组件化的理解
1.组件的封装
视图 数据 变化逻辑(数据驱动视图变化)
在react中 this.state就是数据 render中的就是视图 然后函数中的this.setState({就是变化逻辑}) 这里只是大概说明下让自己有个直观印象 并不说明全部
2.组件的复用
props传递
import React,{Component} from 'react'
import List from './list/index.js'
import Input from 'input/index.js'
class Todo extends Component{
constructor(props){//每个class继承下面都有一个constructor代表其本身
super(props)//因为this在函数中总是指向函数所在的当前对象 所以es6出了一个super的关键字 使this指向函数当前对象的原型对象
this.state = {//写当前组件的数据
list:[]
}
}
render(){ //写dom结构 会变成虚拟dom
return(
<div>
<Input addTitle= {this.addTitle.bind(this)} />//把当前组件的函数传递到子组件里面
<List data={this.state.list}/>//引入子组件标签 因为子组件中需要传入一个list数组 同时子组件中写的属性是data 所以就用了data data可不是唯一的 是自定义的 但是如果想要组件复用的话 最好改data后面的参数
</div>
)
}
addTitle(title){ //方法 给list数组增加值
const currentList = this.state.list
this.setState({ //改变data的属性 跟小程序有点像 也可以说是小程序借鉴这的
list: currentList.concat(title)
})
}
}
export default Todo 导出去在APP.js中引入
在子组件中写 这个子组件是渲染list列表的子组件
import React,{Component} from 'react'
class List extends Component{
constructor(props){
super(props)
}
render(){
const list = this.props.data//此处list得从父组件那里穿过来
return(
<ul>
{
list.map((item,index)=>{ //循环穿过来的数组 把每一项都给一个li标签
return<li key={index}>{item}</li>)
}
}
</ul>
)
}
}
export default List
在子组件中写 这个子组件是输入的子组件
import React,{Component} from 'react'
class Input extends Component{
constructor(props){
super(props)
this.state = {
title:''
}
}
render(){
return(
<div>
<input value={this.state.title} onChantge={this.changeHandle.bind(this)}/>//.bind(this)就是说函数执行的时候 this是当前整个组件的实例
<button onClick={this.clickHandle.bind(this)}>submit</button>
</div>
)
}
changeHandle(event){ //input标签中绑定的value主要是做一个双向绑定的作用
this.setState({
title:event.target.value
})
}
clickHandle(){
const title = this.state.title
const addTitle = this.props.addTitle//此处的addTitle是一个函数添加进父组件的数组
之中 此处的addTitle函数也是父组件中定义的
addTitle(title)
this.setState({//点击按钮完成后 把 input输入框中的值清空
title:''
})
}
}
export default Input