JSX语法细节补充

1. 如何在jsx中添加注释

render方法return出来的东西就是jsx

import React from 'react';
import { Component, Fragment } from 'react'

class TodoList extends Component{
    render(){
        return (
            <Fragment>
            {/*这是一个input框*/}
            {
                //这是一个input框
            }
            <input type="text" /> 
            </Fragment>
        )
    }
}

export default TodoList;

2. className

<input type="text" className="input"/>

动态添加class：

<div className={this.state.active?'active':''}/></div>

3. 不转义

转义，原样输出<h1>hello</h1>
不转义输出 header h1 的hello

dangerouslySetInnerHTML={{__html:item}}: 外层{} 表示的是里面是一个js表达式，内层的{}表示传入的是一个js对象

import React from 'react';
import { Component, Fragment } from 'react'

class TodoList extends Component{
    constructor(props){
        super(props)
        this.state={
            inputValue:"",
            list:[]
        }
    }
    render(){
        return (
            <Fragment>
                   <input 
                   type="text" 
                   value={this.state.inputValue} 
                   onChange={this.handleInputChange.bind(this)} 
                   /> <button onClick={this.handleButtonClick.bind(this)}>提交</button>
            <ul>
                {
                    this.state.list.map((item,index)=>{
                        return <li 
                        key={index}
                        onClick={this.handleItemDelete.bind(this,index)}
                        dangerouslySetInnerHTML={{__html:item}}
                        >
                        </li>
                    })
                }
            </ul>
            </Fragment>
        )
    }
    handleInputChange(e){
        this.setState({
            inputValue:e.target.value
            // list:[list...,e.target.value]
        })
    }

    handleButtonClick(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            //...this.state.list es6展开运算符。a=[1,2,3], ...a 它会吧a展开为 1,2,3
            inputValue:""
        })
    }

    handleItemDelete(index){
        const list = [...this.state.list];//先拷贝一份
        //this.state.list.splice(index,1) 这种写法是错误的
        //react有一个概念叫inmutable：state不允许我们做任何的改变，如果非要改，我们可以拷贝一个副本
        list.splice(index,1)
        this.setState({
            list:list
        })
    }
}

export default TodoList;

4. label的htmlFor

在html中label用于扩大点击区域

import React from 'react';
import { Component, Fragment } from 'react'

class TodoList extends Component{
    render(){
        return (
            <Fragment>
              <label htmlFor="insertValue">请输入内容:</label>
              <input id="insertValue" type="text"/>
            </Fragment>
        )
    }

}

export default TodoList;

当我们点击请输入内容的时候，光标会自动个聚焦到id为insertValue的input框上