JSX 一些语法要注意的

最新推荐文章于 2022-03-23 15:47:01 发布

原创最新推荐文章于 2022-03-23 15:47:01 发布 · 322 阅读

0 ·

CC 4.0 BY-SA版权

React基础内容学习记录专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了JSX中的注释写法，包括在React组件的render方法中如何使用注释，以及如何正确设置元素的样式属性。同时，提到了在React中使用label标签与input元素交互的方法。

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>
    );
  }