前端框架--React JSX

最新推荐文章于 2025-04-12 06:15:00 发布

weixin_34220963

最新推荐文章于 2025-04-12 06:15:00 发布

阅读量197

点赞数

CC 4.0 BY-SA版权

文章标签：前端框架 javascript ui ViewUI

原文链接：https://juejin.im/post/5ce604376fb9a07ec42b3386

本文介绍了JSX，它是JavaScript语法扩展，可描述UI交互形式，有JavaScript全部功能。还说明了使用JSX的注意事项，如通过特定方式渲染、用大标记包裹等。此外，提到在React内不一定要用JSX，但团队建议使用，构建时也不一定要用ES(6+)语法，不过通常建议掌握。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

版权声明：本文为博主原创文章，未经博主允许不得转载。

JSX概述

    const element = <h1>Hello, world!</h1>;
复制代码

类似于上面的这种标签，它既不是字符串，也不是HTML代码，它被称为JSX，是JavaScript语法扩展，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式.
JSX 可能会使人联想到模板语言，但它不仅仅是模板语言，它具有 JavaScript 的全部功能。

使用JSX注意事项：

需要通过 ReactDOM.render() 进行渲染。
整块需要被一个类似于大标记 ,就像下面代码片段中的<div> </div>包裹住。
在标记内使用花括号{ }进行渲染，可以运算表达式，访问变量，调用方法。
可利用return进行返回值。
JSX注释：{/* 注释写在这里 */}

    const username = 'xiaohong';
    const firstname = 'zhangsan';
    function checkFriends(){
        return '我的朋友是'+username + '和'+firstname;
    }
    const element = (
    <div>
        <h1>hello ,{checkFriends()}</h1>   
        {/* 这是一行注释 */}
        {8+5}
    </div>
    )
    ReactDOM.render(
     element,
     document.getElementById('root')
     );
复制代码

除此之外，我们也能够利用进行数组的输出。

    const todoList = ['apple','banana','orange'];
    const element =<div>
        {
            todoList.map(item =>
                <li>{item}</li>
            )
        }
    </div>
    ReactDOM.render(
     element,
     document.getElementById('root')
     );
复制代码

假如标签没有子元素，即没有内容的情况下，使用/进行闭合标记

const element = <img src={user.avatarUrl} />; 
复制代码

babel编译器

正如我们所了解的，ES(6+)并不被所有浏览器完美支持，经过各种编译器编译后，使得JavaScript代码兼容低版本浏览器。
我们利用babel在线工具查看经过编译后的JavaScript代码如下：

    var todoList = ['apple', 'banana', 'orange'];
    var element = React.createElement("div", null, todoList.map(function (item) {
      return React.createElement("li", null, item);
    }));
    ReactDOM.render(element, document.getElementById('root'));
复制代码