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,注意下面的代码是错误的。
<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 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>。
<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="jspang">加入服务：</label>
<input id="jspang" 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="jspang">加入服务：</label>
<input id="jspang" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
<button onClick={this.addList.bind(this)}> 增加服务 </button>
</div>
这时候代码就正确了，可以实现点击<label>后,激活<input>标签了。
转自：我这里是看了技术胖的文章后想记录下，所以复制了过来
网友评论