【React学习 #6】学习JSX

1 年 ago

科, 颖

3 minutes

首先

这篇文章是一位React初学者为了学习而写的文章。
如果有错误的地方，希望您能温柔地指出，谢谢。

JSX 代表什么？

首先，JSX是什么？

JSX是「JavaScript XML」的缩写，是对JavaScript语法的拓展。
简单来说，它让你在JavaScript中可以像写HTML标签一样写代码。
它是通过使用一个名为Babel的工具来实现的。

这是一个示例代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>React</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
        <h1 class="br-primary text-white display-4">React</h1>
        <div class="container mt-3">
            <div id="root"></div>
        </div>
        <script type="text/babel">
            // #rootのElementオブジェクトを取得
            let dom = document.querySelector('#root')
            // 仮想DOMのElementオブジェクトを作成
            let element = <h2>JSX sample</h2>
            // 仮想DOMをレンダリング
            ReactDOM.render(element, dom)
        </script>
    </body>
</html>

这一部分就是。
尽管是JavaScript，但可以使用“变量 = HTML标签”的写法。

// 仮想DOMのElementオブジェクトを作成
let element = <h2>JSX sample</h2>

如果不使用JSX来编写，可以通过使用createElement来实现类似的结果。

// 仮想DOMのElementオブジェクトを作成
let element = React.createElement('h2', {}, "JSX sample")

使用JSX可以更直观地了解显示了哪些标记，这非常好。

在JSX中嵌入值

JSX不仅仅是嵌入标签，还可以嵌入JavaScript的值。

这是一个示例代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>React</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
        <h1 class="br-primary text-white display-4">React</h1>
        <div class="container mt-3">
            <div id="root"></div>
        </div>
        <script type="text/babel">
            // #rootのElementオブジェクトを取得
            let dom = document.querySelector('#root')

            // 変数を宣言
            let title = "タイトル"
            let message = "メッセージです。"
            let link = "http://google.com"

            const msg_s = {
                fontSize:"20pt",
                color:"red",
                border:"1px solid blue"
            }

            // 関数を定義
            let printMsg = function(msg, size, color){
                const style = {
                    fontSize: size + "pt",
                    fontWeight: '700',
                    color: color,
                    border: "1px solid " + color
                }
                return <p style={style}>{msg}</p>
            }

            // 仮想DOMのElementオブジェクトを作成
            let element = (
                <div className="alert alert-primary">
                    <h3>{title}</h3>
                    <p style={msg_s}>{message}</p>
                    <p>{10*10}</p>
                    <p><a href={link} target="blank">this is link!</a></p>
                    {printMsg('メッセージ1', 36, '#fff')}
                    {printMsg('メッセージ2', 24, '#aaa')}
                    {printMsg('メッセージ3', 12, '#666')}
                </div>
            )

            // 仮想DOMをレンダリング
            ReactDOM.render(element, dom)
        </script>
    </body>
</html>

这个地方就是{}中嵌入变量、计算式和函数。

let element = (
    <div className="alert alert-primary">
        <h3>{title}</h3>
        <p style={msg_s}>{message}</p>
        <p>{10*10}</p>
        <p><a href={link} target="blank">this is link!</a></p>
        {printMsg('メッセージ1', 36, '#fff')}
        {printMsg('メッセージ2', 24, '#aaa')}
        {printMsg('メッセージ3', 12, '#666')}
    </div>
)

最后

这次学习了JSX的基础用法。
相比在JavaScript或者jQuery中生成标签并显示，React真的方便得多。
因为我个人以前在jQuery中做过一些非常动态地改变标签的处理，所以回想起那时的辛苦，感觉React真的是非常方便的。