JSX防踩坑

JSX语法中需要注意的几个小坑。

JSX代码注释

错误实例

<Fragment>
    //第一次写注释，这个是错误的
    <div> </div>
</Fragment> 

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

第一种
用VSCode的快捷键，直接按Ctrl+/，就会自动生成正确的注释了。

<Fragment>
     {/* 正确注释的写法 */}  
    <div> </div>
</Fragment> 

//备注：如果jsx中在render中return下写注释 一定要外层套一个div  **
//或写到里面去 不能跟return( 下面直接写

第二种
在jsx中写javascript代码。所以外套入了{}，然后里边就是一个多行的javascript注释。如果你要使用单行祝注释//，你需要把代码写成下面这样。

<Fragment>
    {
        //正确注释的写法 
    }
    <div> </div>
</Fragment> 

JSX中的class陷阱

1、先创建CSS样式文件 名字任意 我们先给它index.css
2、在你需要用到的.js里引入，先用import进行引入

import './style.css'

3、给JSX加入`class,注意把class换成className，它是防止和js中的class类名 冲突，所以要求换掉。

<input className="input" />

JSX中的html解析问题

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

<ul>
    {
        this.state.list.map((item,index)=>{
            return (
                <li 
                    key={index+item}
                    dangerouslySetInnerHTML={{__html:item}}
                     { /* ↑ 这里哦，备注：item 遍历的时候 外层就不用写了*/}
                >
                </li>
            )
        })
    }
</ul> 

JSX中标签的坑

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

我们在文本框前面加入一个。
这时候想点击“XXXX”直接可以激活文本框，方便输入。按照html的原思想，是直接加ID就可以了。代码如下：

	<div>
	    <label for="input1">XXXX：</label>
	    <input id="input1" className="input" value={this.state.inputValue} />
	</div>

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

	<div>
	    <label htmlFor="input1">XXXX：</label> {/* 这里的htmlFor*/}
	    <input id="input1" className="input" value={this.state.inputValue} />
	</div>

。
。
。

转自大神 技术胖 ：http://jspang.com/posts/2019/05/04/new-react-base.html