JSX防踩坑

JSX語法中需要注意的幾個小坑。

JSX代碼註釋

錯誤實例

<Fragment>
    //第一次寫註釋，這個是錯誤的
    <div> </div>
</Fragment> 

那寫JSX的註釋，可以有下面兩種寫法:

第一種
用VSCode的快捷鍵，直接按Ctrl+/，就會自動生成正確的註釋了。

<Fragment>
     {/* 正確註釋的寫法 */}  
    <div> </div>
</Fragment> 

第二種
在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