JSX 一些语法 要注意的

JSX的注释。

首先，JSX 代码，是在render 中 return 里面的，然后，它的注释写法是下面这样的。

render() {
    return (
      <React.Fragment>
        <div>
          {/*注释*/}
          <label htmlFor="insertArea">输入内容</label>
          <input
            id="insertArea"
            value={this.state.inputValue}
            onChange={this.handleInputChange}
          />
          <button style={{background: 'red',color: 'white'}} onClick={this.handleBtnClick}>add</button>
        </div>
        <ul>
          {this.getTodoItems()}
        </ul>
      </React.Fragment>
    );
  }

元素的样式 class 属性，不要用，使用className 属性。如下。

        return (
          <TodoItem className='red-btn' deleteItem={this.handleDelete} key={index} content={item} index={index} />
        )

不用转义标签，直接按html 显示出来，如下。有实际需要时，可以这样写，但不推荐其他情况下这样写，因为可能有安全风险。

<li
  key = {index}
  dangerouslySetInnerHTML={{__html: item}}
>
</li>

label 标签。在html 中，label 主要起扩大输入内容的作用。

在React 中，我们想点击label 对应的input 获得焦点，可以如下。(将html 的for 属性，改为htmlFor属性)

  render() {
    return (
      <React.Fragment>
        <div>
          <label htmlFor="insertArea">输入内容</label>
          <input
            id="insertArea"
            value={this.state.inputValue}
            onChange={this.handleInputChange}
          />
          <button style={{background: 'red',color: 'white'}} onClick={this.handleBtnClick}>add</button>
        </div>
        <ul>
          {this.getTodoItems()}
        </ul>
      </React.Fragment>
    );
  }