课程内容
1、React基础
2、React Hooks
3、React路由
4、React Redux
5、组件库
6、Immutable
7、Mobx
8、React+TS
9、单元测试
10、dva+umi
五、组件的数据挂载方式
1、状态（state）
import React, { Component } from 'react'
export default class app extends Component {
a = 1
constructor(){
super()
this.state = {
mytext:"收藏",
myName:"小明",
myShow:true,
}
}
render() {
return (
<div>
<h1>欢迎来到react开发-{this.state.myName}</h1>
<button onClick={
()=>{
this.setState({
myShow:!this.state.myShow,
myName:"小李"
})
if(this.state.myShow){
console.log("收藏的逻辑");
}else{
console.log("取消收藏的逻辑");
}
}
}>{this.state.myShow?'收藏':'取消收藏'}</button>
</div>
)
}
}
2、列表渲染和key值解析
import React, { Component } from 'react'
export default class App extends Component {
state = {
list:[{
id:1,
text:"1111"
},{
id:2,
text:"2222"
},{
id:3,
text:"3333"
}]
}
render() {
return (
<div>
{
this.state.list.map((item,index) =>
<li key={item.id}>{item.text}--{index}</li>)
}
</div>
)
}
}
var list = ["aa","bb","cc"]
var newlist = list.map(item => `${item}`)
console.log(newlist.join(""));
3、todolist案例(1)
import React, { Component } from 'react'
export default class root extends Component {
a = 100
myref = React.createRef()
state = {
list:[{
id:1,
mytext:"aa"
},{
id:2,
mytext:"bb"
},{
id:3,
mytext:"cc"
},]
}
render() {
return (
<div>
{}
<input ref={this.myref}/>
<button onClick={this.handleClick}>add</button>
<ul>
{
this.state.list.map(item=>
<li key={item.id}>{item.mytext}</li>
)
}
</ul>
</div>
)
}
handleClick = ()=>{
console.log(this.myref.current.value);
let newlist = [...this.state.list]
newlist.push({
id:Math.random()*100000000,
mytext:this.myref.current.value
})
this.setState({
list:newlist
})
}
}
4、todolist案例(2)删除和条件渲染
import React, { Component } from 'react'
import "./css/01-index.css"
export default class root extends Component {
a = 100
myref = React.createRef()
state = {
list:[{
id:1,
mytext:"aa"
},{
id:2,
mytext:"bb"
},{
id:3,
mytext:"cc"
},]
}
render() {
return (
<div>
{}
<input ref={this.myref}/>
<button onClick={this.handleClick}>add</button>
<ul>
{
this.state.list.map((item,index)=>
<li key={item.id}>
{item.mytext}
<button onClick={()=>this.handleDelClick(index)}>删除</button>
</li>
)
}
</ul>
{}
{}
<div className={this.state.list.length===0 ? '' : 'hidden'}>暂无数据</div>
</div>
)
}
handleClick = ()=>{
console.log(this.myref.current.value);
let newlist = [...this.state.list]
newlist.push({
id:Math.random()*100000000,
mytext:this.myref.current.value
})
this.setState({
list:newlist
})
}
handleDelClick(index){
let list = this.state.list.slice()
list.splice(index,1)
this.setState({
list:list
})
}
}
5、dangerouslySetInnerHTML：标签显示富文本
import React, { Component } from 'react'
import "./css/01-index.css"
export default class root extends Component {
a = 100
myref = React.createRef()
state = {
list:[{
id:1,
mytext:"aa"
},{
id:2,
mytext:"bb"
},{
id:3,
mytext:"cc"
},]
}
render() {
return (
<div>
{}
<input ref={this.myref}/>
<button onClick={this.handleClick}>add</button>
<ul>
{
this.state.list.map((item,index)=>
<li key={item.id}>
<span dangerouslySetInnerHTML={
{
__html:item.mytext
}
}></span>
<button onClick={()=>this.handleDelClick(index)}>删除</button>
</li>
)
}
</ul>
{}
{}
<div className={this.state.list.length===0 ? '' : 'hidden'}>暂无数据</div>
</div>
)
}
handleClick = ()=>{
console.log(this.myref.current.value);
let newlist = [...this.state.list]
newlist.push({
id:Math.random()*100000000,
mytext:this.myref.current.value
})
this.setState({
list:newlist
})
}
handleDelClick(index){
let list = this.state.list.slice()
list.splice(index,1)
this.setState({
list:list
})
}
}
