react 的JSX语法需要注意哪些点？

  • Z时代
  • 2024-01-10
  • 分类：综合

react

注释方式

ReactDOM.render(
    <div>
        {/*JSX 中的注释方式*/}
    </div>,
    document.getElementById('root')
 )

jsx语法中只能有一个顶级标签（元素），如下写法是错误的，这和react的diff算法相关

ReactDOM.render(
    <div>
    </div>
    <p></p>,
    document.getElementById('root')
 )

JSX中所有的标签都必须有闭标签

ReactDOM.render(
    <div>
        <input type="text" />
        <img src="" />
    </div>,
    document.getElementById('root')
 )

使用组件时，首字母必须大写

... ...
import Banner from ./Banner
ReactDOM.render(
    <div>
        <Banner />
    </div>,
    document.getElementById('root')
 )

在JSX中我们通常是通过 {} 的方式插入值，但是设置style属性需要{{ }},

并且遇到-分割的属性时，使用小驼峰的写法，如：text-align

ReactDOM.render(
    <div style={{background:red;}}>
        { 1+2 }
        <div style={{ padding: 30, textAlign: 'center' }}>
           456
        </div>　　　　　　
    </div>,
    document.getElementById('root')
 )

html标签上的属性名

因为jsx最终要转成js进行编译，因此html标签上的属性名与JavaScript关键字和保留字相冲突的都需要做一些变化，其规则同js中操作dom属性时一样：

一般来说，在使用js操作标签属性时，若出现与JavaScript关键字和保留字相冲突的情况，除html标签class（转为className）以外的属性，在属性前加上小写的html即可，如

html标签的class在jsx语法中变为 className，html标签的for属性（如：<label for="msg" ></label>）在jsx中变为<label htmlFor="msg" ></label>，

ReactDOM.render(
    <div className="tips">
        <label htmlFor="name" ></label>
    </div>,
    document.getElementById('root')
 )

调用.css 文件中的css属性

... ...
import classes form './myCss.css'
ReactDOM.render(
    <div className={classes['mycss']}>
    </div>,
    document.getElementById('root')
 )

 事件必须修正this指针，且绑定事件名时要使用小驼峰的写法

constructor{
  this.fun = this.fun.bind(this)      
}
//或
onClick = {() => ()} //绑定的事件名小驼峰写法
onClick = {this.fun.bind(this)}

以上是 react 的JSX语法需要注意哪些点？ 的全部内容， 来源链接： utcz.com/z/384215.html

回到顶部