JSX语法细节补充

jsx如何写注释

jsx中{}括起来的是js表达式，本质是js，所以注释jsx和注释js的语法一样

import React, { memo } from 'react'

const Home = memo(() => {
  return (
    <div>
      Home
      {/* 这是注释 */}
      {
        //这是注释1
        //这是注释2
      }
    </div>
  )
})

export default Home

dom属性上的class变成了className

import React, { PureComponent } from 'react'

export default class Index extends PureComponent {
  render() {
    return (
      <div className='active'>index</div>
    )
  }
}

html转义

<div dangerouslySetInnerHTML={{ __html:str_from_database }} />

label中的for变成了htmlFor

在html中，label的作用是扩大点击区域

现在有这样一个需求，当点击输入内容的时候，光标自动聚焦到input输入框，就像下面的效果一样，我们要怎么做呢？给input定义一个id，让label的htmlFor等于这个id值即可

import React, { memo } from 'react'
import { PageWrapper } from '../page'

const Home = memo(() => {
  return (
    <PageWrapper>
      <label htmlFor="inputSomething">输入内容:</label>
      <input type="text" id='inputSomething'/>
    </PageWrapper>
  )
})

export default Home