React之JSX的语法细节

带注释

import React, { Component, Fragment } from 'react'
import './style.css'

class TodoList extends Component {
  constructor (props) {
    super(props)
    this.state = {
      inputValue: '',
      list: []
    }
  }

  render () {
    return (
        //Fragment 替代最外层的div
      <Fragment>
        <div>
          {/* 写注释方式一 */}
          {
            // 写注释方式二，且方式二 { // } 不能在同一行
          }
          <label
            // label中的for会与react中的for混淆，使用htmlFor替代for
            htmlFor="insertArea"
          >
            输入内容：
          </label>
          <input
            id="insertArea"
            // class在react中是一个类关键词，使用className替代class类样式键名
            className='input'
            value={this.state.inputValue}
            // 使用bind改变this指向，使得handleInputChange方法中的this可以取到constructor中的属性
            onChange={this.handleInputChange.bind(this)}
          />
          <button
            onClick={this.handleBtnChange.bind(this)}
          >
            提交
          </button>
        </div>
        <ul>
          {/* 使用map循环list中的数据，每次增加一个li标签 */}
          {
            this.state.list.map((item, index) => {
              return (
              <li 
                key={index}
                onClick={this.handleItemDelete.bind(this, index)}
                // dangerouslySetInnerHTML 输入框语法转义
                dangerouslySetInnerHTML={{__html: item}}
              >
                {/* {item} */}
              </li>
              )
            })
          }
        </ul>
      </Fragment>
    )
  }

  handleInputChange (e) {
    this.setState({
      inputValue: e.target.value
    })
  }

  handleBtnChange () {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }

  handleItemDelete (index) {
    // immutable
    // state 不允许我们做任何的改变
    const list = [...this.state.list]
    list.splice(index, 1)
    this.setState({
      list: list
    })
  }
}

export default TodoList

原始代码

import React, { Component, Fragment } from 'react'
import './style.css'

class TodoList extends Component {
  constructor (props) {
    super(props)
    this.state = {
      inputValue: '',
      list: []
    }
  }

  render () {
    return (
      <Fragment>
        <div>
          {/* 写注释方式一 */}
          {
            // 写注释方式二，且方式二 { // } 不能在同一行
          }
          <label htmlFor="insertArea">输入内容：</label>
          <input
            id="insertArea"
            className='input'
            value={this.state.inputValue}
            onChange={this.handleInputChange.bind(this)}
          />
          <button
            onClick={this.handleBtnChange.bind(this)}
          >
             提交
           </button>
        </div>
        <ul>
          {
            this.state.list.map((item, index) => {
              return (
              <li 
                key={index}
                onClick={this.handleItemDelete.bind(this, index)}
                dangerouslySetInnerHTML={{__html: item}}
              >
                {/* {item} */}
              </li>
              )
            })
          }
        </ul>
      </Fragment>
    )
  }

  handleInputChange (e) {
    this.setState({
      inputValue: e.target.value
    })
  }

  handleBtnChange () {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }

  handleItemDelete (index) {
    // immutable
    // state 不允许我们做任何的改变
    const list = [...this.state.list]
    list.splice(index, 1)
    this.setState({
      list: list
    })
  }
}

export default TodoList