React 入门 02 - JSX

最新推荐文章于 2025-12-17 16:41:30 发布

原创最新推荐文章于 2025-12-17 16:41:30 发布 · 679 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #javascript

React 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了JSX在React中的使用，包括JSX的基本概念、如何在JSX中嵌入变量和函数表达式，以及如何将JSX作为表达式进行赋值。通过实例展示了JSX与React结合的强大能力。

前言

在 React 入门 01 - Hello World中，简单了解了下React基本概念以及如何运用到Html中。现在我们学习一下在React中配合使用最多的JSX相关知识。

JSX

JSX，是一个 JavaScript 的语法扩展。比如如下行语句，它既不是单纯Html语句也不是普通Java Script。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式，在React中配合使用非常流行。

const element = <h1>Hello, world!</h1>;

JSX 嵌入变量、函数表达式

我们可以声明基本变量、数组，然后在JSX中使用它。

var users = ['Ria', 'Ming'];
var arr = ['Let\'s start to learn React!']
ReactDOM.render(
    <div> 
        {
            users.map(function(user) {
                return <div><h1>Hello, {user}! </h1></div>
            })

        }
        <div><h2>{arr}</h2></div>
    </div>,
    document.getElementById('root')
);

variable.html Git Hub 🔗

👆上面例子是在JSX中应用变量，同理可以声明函数表达式并完成调用。

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: 'Ria',
    lastName: 'Yang'
};

const element = (
    <h1>
        Hello, {formatName(user)}!
    </h1>
);

ReactDOM.render(
    element,
    document.getElementById('root')
);

function.html Git Hub 🔗

JSX 作为表达式赋值

JSX 也是一个表达式。在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。也就是说，你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX。

function greeting(user) {
    if (user) {
        return <h1> Hello, {formatName(user)}! </h1>;
    }

    return <h1> Hello, Stranger! </h1>;
}

expressions.html Git Hub 🔗