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

约定不等于承诺〃 2022-12-13 00:44 65阅读 0赞

#### 1.JSX代码注释 ####

我第一次写JSX的注释，是直接像以前js注释写的，当然这样写是不对的。

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

推荐第一种注释。

#### 2.JSX中的class陷阱 ####

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

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

.input { border:3px solid #ae7000}

第二步：在`Xiaojiejie.js`里引入，先用`import`进行引入

import './style.css'

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

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

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

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

#### 3.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`格式的输出。

#### 4.JSX中标签的坑 ####

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

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

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

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

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

个人博客：[Karma‘s Blog][Karma_s Blog]  
源码地址：[传送门][Link 1]

[Karma_s Blog]: http://karma520.com/2020/10/08/27%20React%E8%BF%9B%E9%98%B6-JSX%E9%98%B2%E8%B8%A9%E5%9D%91%E7%9A%84%E5%87%A0%E4%B8%AA%E5%9C%B0%E6%96%B9/
[Link 1]: https://github.com/kay-520/React_study