1.map遍历提示需要加key
2.a标签废弃 href="javascript:;",href值必需为url
3.改变数组项的值,页面不渲染,正确的修改state值应该为this.setState({
data:value,
})
this.state = {
tabBar: [
{
name: '大会概况',
href: 'introduction',
isShow: 'block',
},
{
name: '会议嘉宾',
href: 'guest',
isShow: 'block',
},
{
name: '会议议程',
href: 'agenda',
isShow: 'block',
},
{
name: '展位预定',
href: 'positionReserve',
isShow: 'none',
},
{
name: '赞助方案',
href: 'sponsor',
isShow: 'none',
},
{
name: '酒店预定',
href: 'hotelReserve',
isShow: 'none',
},
{
name: '立刻报名',
href: 'signIn',
isShow: 'none',
},
],
}
methodsFun() {
const tabBarList = this.state.tabBar.map(item => {
item.isShow = item.href === tabInf.href ? 'block' : 'none'
return item
})
// 错误
this.state.tabBar = [...tabBarList ];
// 正确
this.setState({
tabBar: [...tabBarList],
})
}
4.react解析带有html标签的字符串
const content = {__html:'aaaa<br /> ddddd'};
<div dangerouslySetInnerHTML={content}>
5.react button绑定click事件传参,未点击触发
错误代码如下:<button className="btn btn-default" onClick={(this.myclickHandler('pig','dog')}>按钮</button>
import React from 'react'
export default class BindEvent extends React.Component{
constructor(){
super()
this.state={
msg:'dog'
}
}
render(){
return <div>
<button className="btn btn-default" onClick={this.myclickHandler('pig','dog')}>按钮</button>
<hr/>
<h3>{this.state.msg}</h3>
</div>
}
myclickHandler=(arg1,arg2)=>{
this.setState({
msg:'yellow dog'+arg1+arg2
})
}
}
正确代码如下:<button className="btn btn-default" onClick={()=>{this.myclickHandler('pig','dog')}}>按钮</button>
import React from 'react'
export default class BindEvent extends React.Component{
constructor(){
super()
this.state={
msg:'dog'
}
}
render(){
return <div>
<button className="btn btn-default" onClick={()=>{this.myclickHandler('pig','dog')}}>按钮</button>
<hr/>
<h3>{this.state.msg}</h3>
</div>
}
myclickHandler=(arg1,arg2)=>{
this.setState({
msg:'yellow dog'+arg1+arg2
})
}
}