react学习之旅三：JSX语法避坑

仍然使用上一章的小姐姐菜单样例

一、注释

标签中注释：

多行注释：{/**/}

单行注释：

{

//

}

二、引用CSS

src下创建css文件，文件名style.css

.input{
    border:3px solid #ae7000
}

在Xiaojiejie组件中引入css文件：

import './style.css';

给input添加css效果，不要使用class，会与class类混淆，使用className：

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

运行项目：

三、解析html标签

在之前的小姐姐菜单中写的<li></li>中内容是直接显示item，不会对标签进行一个解析：

要对标签进行解析，需要为li标签加上dangerouslySetInnerHTML属性，让item以解析后的形式显示：

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

四、label辅助标签

在JSX语法中，为了防止混淆，label辅助标签的绑定不再使用for，而是使用htmlFor。

例如这里需要点击“增加服务：”后光标自动定位到input输入框：

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