react项目踩过的坑

麦兜_冰夕

已于 2023-10-25 16:14:29 修改

阅读量490

点赞数 1

分类专栏： react 文章标签： react踩坑

于 2021-06-11 16:52:54 首次发布

本文链接：https://blog.csdn.net/lyn1772671980/article/details/117822036

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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
       })
    }
}

6.userState遇到的坑