1.用官方提供的脚手架工具构建一个react项目
npm install -g create-react-app
全局下安装脚手架工具create-react-app my-demo
创建项目 my-demo是项目名字cd my-demo
进入项目npm start
运行,启动项目
2.项目目录简介
- package.json文件里是一些项目的介绍
- src目录里放的是我们写的项目的所有源代码
- index.js是所有代码的入口文件
3.简易版TodoList(新增及删除功能)
import React, { Component , Fragment} from 'react'
class TodoList extends Component{
constructor(props) {
super(props)
this.state = {
inputValue : "123",
list : []
}
}
render() {
return (
<Fragment>
<input value = {this.state.inputValue} onChange = {this.handleInputChange.bind(this)}/><button onClick = {this.handleBtnClick.bind(this)}>提交</button>
<ul>
{
this.state.list.map((item, index) => {
return <li key={index} onClick = {this.handleItemDelete.bind(this,index)}>{item}</li>
})
}
</ul>
</Fragment>
)
}
handleInputChange(e) {
console.log(this);
//this.setState({
// inputValue : e.target.value
//})
const value = e.target.value
this.setState(() => {
return {
inputValue : value
}
})
}
handleBtnClick(e) {
//this.setState({
// list: [...this.state.list, this.state.inputValue],
// inputValue : ""
//})
//setState() 可以接收一个函数,这个函数接受两个参数,第一个参数表示上一个状态值,第二参数表示当前的 props,
//这个函数的prevState是React框架帮你保存和传递的,自己不用传。第一个参数prevState就是上面设置的this.state
this.setState((prevState) => ({
list: [...prevState.list, prevState.inputValue],
inputValue : ''
}))
}
handleItemDelete(index) {
//const listNew = [...this.state.list];
//listNew.splice(index,1)
//this.setState({
// list : listNew
//})
this.setState((prevState) => {
const listNew = [...prevState.list];
listNew.splice(index,1)
return {list : listNew}
})
}
}
export default TodoList
当React元素包含html标签时,如果不设置dangerouslySetInnerHTML属性,就会把html当做字符串
<li key={index} onClick={this.handleItemDelete.bind(this, index)} dangerouslySetInnerHTML={{__html:item}}></li>
效果:点击提交后<h2>
标签被正常显示成了标题样式
启用dangerouslySetInnerHTML属性,可能会受到XSS攻击
4.组件拆分及组件之间的传值
-
父向子组件传值,通过
props
父组件TodoList文件中:记得引入子组件
import TodoItem from './TodoItem'
<ul> { this.state.list.map((item, index) => { return ( <div> <TodoItem content={item} key={index}/> </div> ) }) } </ul>
子组件TodoItem文件中:
import React, { Component } from 'react' class TodoItem extends Component{ constructor(props) { super(props); this.state = { } } render() { return <div>{this.props.content}</div> } } export default TodoItem
-
子向父组件传值,通过事件,(父组件通过props把自己的方法传给子组件,这样子组件就能调用父组件的方法,也就能修改父组件的数据了)
父组件TodoList文件中:
<ul> { this.state.list.map((item, index) => { return ( <TodoItem key={index} content={item} index={index} deleteItem={this.handleItemDelete.bind(this)} /> ) }) } </ul>
子组件TodoItem文件中:
import React, { Component } from 'react' class TodoItem extends Component{ constructor(props) { super(props); this.delete = this.delete.bind(this) this.state = { } } render() { return <div onClick={this.delete}>{this.props.content}</div> } delete() { //es6解构赋值写法 const {deleteItem , index} = this.props deleteItem(index) //this.props.deleteItem(this.props.index) } } export default TodoItem