React 入门 02 - JSX

Posted 2023-02-16 逆風的薔薇

前言

在 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 🔗