P11:React进阶-JSX防踩坑的几个地方

通过之前的教程作完“大宝剑”菜单后,如果你跟着我做出来了,说明你的React已经入门了。也是一个好的开始,接下来的路虽然还很长,但会平坦的多。本文就讲一下JSX语法中需要注意的几个小坑。

JSX代码注释

JSX中的代码注释是非常有讲究的,这个书上介绍的也非常少,所以在这里讲一下,因为我在初学React在这里踩过坑。

我第一次写JSX注释,是直接这样写的,当然这样写是完全不对的。

<Fragment>
    //第一次写注释,这个是错误的
    <div>
        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
        <button onClick={this.addList.bind(this)}> 增加服务 </button>
    </div>
</Fragment>

那写JSX的注释,可以有下面两种写法:

<Fragment>
    {/* 正确注释的写法 */}
    <div>
        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
        <button onClick={this.addList.bind(this)}> 增加服务 </button>
    </div>
</Fragment>

如果你记不住,有个简单的方法,就是用VSCode的快捷键,直接按Ctrl+/,就会自动生成正确的注释了。

你可以把这个理解为,在JSX中写javascript代码。所以外出我们套入了{},然后里边就是一个多行的javascript注释。如果你要使用单行祝注释//,你需要把代码写成下面这样。

<Fragment>
    {
        //正确注释的写法 
    }
    <div>
        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
        <button onClick={this.addList.bind(this)}> 增加服务 </button>
    </div>
</Fragment>

也就是你要进行换行,所以个人认为这种方法不太优雅,所以推荐第一种注释方法。

JSX中的class陷阱

比如要给朴素单纯的界面,加入黄色成分,让我们的文本框又粗又黄。我们先来错误演示。

第一步:先写一个CSS样式文件,在src目录下,新建一个style.css的样式文件。

.input {border:3px solid #ae7000}

第二步:在Xiaojiejie.js里引入,先用import进行引入,能用import引入,都是webpack的功劳。

import './style.css'

第三部:给JSX加入`class,注意下面的代码是错误的。

<input class="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />

虽然现在页面是可以正常显示结果的,但是你打开浏览器控制台会发现Warning警告。

index.js:1437 Warning: Invalid DOM property `class`. Did you mean `className`?
    in input (at Meinv.js:19)
    in div (at Meinv.js:18)
    in Xiaojiejie (at src/index.js:5)

意思就是要把class换成className,它是防止和js中的class类名 冲突,所以要求换掉。这也算是一个小坑吧。

JSX中的html解析问题

如果想在文本框里输入一个<h1>标签,并进行渲染。默认是不会生效的,只会把<h1>标签打印到页面上,这并不是我想要的。如果工作中有这种需求,可以使用dangerouslySetInnerHTML属性解决。具体代码如下:

<ul>
    {
        this.state.list.map((item,index)=>{
            return (
                <li 
                    key={index+item}
                    onClick={this.deleteItem.bind(this,index)}
                    dangerouslySetInnerHTML={{__html:item}}
                >
                </li>
            )
        })
    }
</ul>

上面的代码就可以实现html格式的输出。

JSX中<label>标签的坑

JSX中<label>的坑,也算是比较大的一个坑,label是html中的一个辅助标签,也是非常有用的一个标签。

先看下面的代码,我们在文本框前面加入一个<label>

<div>
    <label>加入服务:</label>
    <input className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}> 增加服务 </button>
</div>

这时候想点击“加入服务”直接可以激活文本框,方便输入。按照html的原思想,是直接加ID就可以了。代码如下:

<div>
    <label for="mybj">加入服务:</label>
    <input id="mybj" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}> 增加服务 </button>
</div>

这时候你浏览效果虽然可以正常,但console里还是有红色警告提示的。大概意思是不能使用for.它容易和javascript里的for循环混淆,会提示你使用htmlfor

<div>
    <label htmlFor="mybj">加入服务:</label>
    <input id="mybj" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}> 增加服务 </button>
</div>

这时候代码就正确了,可以实现点击<label>后,激活<input>标签了。

这节算是我总结的一些JSX中的坑吧,总结出来,希望小伙伴们少踩这些坑,能快速上手React

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P11:React进阶-JSX防踩坑的几个地方

发表评论

提供最优质的资源集合

立即查看 了解详情