React 基础：JSX 语法规则总结（通俗易懂，且全面）-Javascript前端- WEB程序开发笔记

React 基础：JSX 语法规则总结（通俗易懂，且全面）

原创

作者：程序员三丰

发布时间：2022-09-15 14:05

标签： Javascript React

浏览量：833

最近我在学习 React 框架，学到 JSX 这块感觉老师讲的特别好，所以把我的笔记分享出来，希望可以帮到还困惑于此的人！

先看段定义虚拟 DOM 的代码吧

const myId = 'test';
const title = 'hello, world'

const VDOM = (
    <div>
        <h2 className="title" id={myId.toLowerCase()}>
            <span style={{color: 'red', fontSize: '28px'}}>{title.toUppercase()}</span>
        </h2>
        <p>这是一个React虚拟DOM。</p>
        <input type="text" />
    </div>
)

JSX 语法规则总结：

定义虚拟 DOM 时，不要写引号；
标签中混入 JS 表单时时要用{}；
标签的样式类名指定不能用 class（因为 class 与 ES6 中声明类的关键字 class 冲突），要用 className;
内敛样式要用 style={{key:value}}的形式去写，如果 key 包含连字符（如”font-size”），需要按照小驼峰形式来写（如 fontSize）；
只能有一个根标签；
标签必须闭合；
标签首字母：
- 若小写字母开头，则将该标签转为 html 中同名元素，若 html 中无该标签对应的同名元素，则报错；
- 若大写字母开头，React 就去渲染对应的组件，若组件没有定义，则报错。

React 基础：JSX 语法规则总结（通俗易懂，且全面）

先看段定义虚拟 DOM 的代码吧

JSX 语法规则总结：

文章归档

推荐文章

热门标签

友情链接