由于没有React经验，所以我决定从官方教程学习React的第二部分（使用JSX编写标记）

2 年 ago
文, 翔
3 minutes

首先
or
一开始

前次的文章可以从以下地方学习React的官方教程，因为我没有经验 Part1.

我会继续总结我学到的内容。
上次我们大致了解了React的相关部分。
这次我们会更深入地讨论JSX并进行确认。

学习REACT-基于JSX编写标记的内容。

JSX即JavaScript XML。它是一种用于在React中构建UI组件的语法扩展。

JSX的概述：

首先要明白的是，React 和 JSX 是两个不同的东西。

JSX是JavaScript的擴充，可以使用類似XML的語法來編寫標記。而React則是一個用於顯示界面的JavaScript庫，兩者是不同的。

再下一个是JSX是JavaScript对象的一部分。
它看起来像HTML，但其实里面是一个对象。

我们将依次对这两个问题进行讨论。

理解JSX

在开头，我提到了JSX是JavaScript的扩展，不同于React，但是扩展又是什么意思呢？让我们从JSX的内容来思考。

不使用JSX的写法

React和JSX是两种不同的东西，因此可以在React中不使用JSX进行编码。

我們試著做一下吧。讓我們開始編輯App.js。
（關於App.js的詳細內容，請參考初次文章）

从React中导入createElement函数，并且修改App函数的内容。
在createElement函数中，第一个参数是HTML标签，第二个参数不使用所以设为null，第三个参数用于设置标签的内容。

import logo from './logo.svg';
import './App.css';
import { createElement } from 'react';

function App() {
  return createElement('h1', null, 'Helllo World!');
}

export default App;
undefined

不过，虽然这次只是

标签，但是随着HTML元素的增加，使用这个函数来表示会有些麻烦。
JSX的写法更简洁，而且与HTML的记法几乎相同，所以直观上也更容易理解。

要在JSX中实现与之前相同的行为，可以按照以下方式进行。

function App() {
  return (
    <h1>Hello World!</h1>
  );
}

export default App;

为什么在JSX的声明方式下，即使只是普通的HTML，也无法看到函数等处理，却能正确显示结果呢？

我們接下來將確認其內容。

将JSX转换

前面的问题的答案很简单，因为JSX的编写被转换为JavaScript语法在背后进行。这个转换过程使用的是一个叫做Babel的工具。

请查看以下网站了解有关Babel转换的信息。
Babel-试用一下
您可以在这个网站上查看使用Babel进行转换的结果。

让我们来转换这个JSX代码吧：

你好，世界！

undefined

换句话说，实际上，JSX 在内部也被转换成调用 React 提供的类似 createElement 函数的形式。换句话说，JSX 只是一种方便的写法，它是对 JavaScript 的扩展。

根据参考资料，从React 17开始似乎不再使用上述的转换方法。如果在Babel网站上以新的转换方式尝试，将”React Runtime”设置为”Automatic”，您可以确认其具体形式如何。

JSX作为一个对象

接下来，让我们确认一下JSX是一个对象。
我们按照刚才的方式编辑App.js。

将JSX存储在变量中，并将该变量返回。
同时，我们还将变量的类型和变量本身输出到控制台。

import logo from './logo.svg';
import './App.css';

function App() {
  const obj = (<h1>Hello World!</h1>);
  console.log(typeof(obj));
  console.log(obj);
  return obj;
}

export default App;
undefined

需要关注的是props和type。
type属性设置为”h1″，
props属性设置为”children: ‘你好，世界！'”。

可以看出，传递的

Hello World!

作为JSX，实际上在内部处理中被转换成了上述的对象。

补充一下，没有任何说明
const obj = (

Hello World!

);
但是，由于JSX是对象，所以可以轻松地将其存储在变量中。
通过返回这个变量obj，可以实现与在return语句中编写JSX相同的行为。

使用JSX

我认为你已经理解了JSX是什么。那么，现在让我们开始学习如何使用JSX来编写标记。

为此，必须牢记三个规则。

1. 路由标签只需要一个

假设有以下的HTML标签（仅摘录body标签内部）。
在正常的HTML情况下，可以正常地显示在屏幕上。
※可以从以下网站确认其正确运行。 liveweave

<h1>title1</h1>
<h2>title3</h2>
<h3>title3</h3>

让我们用JSX来编写这个。
我将把它转录到App.js中。

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <h1>title1</h1>
    <h2>title3</h2>
    <h3>title3</h3>
  );
}

export default App;
undefined

如果要修改之前的App.js文件，

function App() {
  return (
    <div>
      <h1>title1</h1>
      <h2>title3</h2>
      <h3>title3</h3>
    </div>
  );
}

这里是一个选项：我们约定根标签只能是

标签，并且可以设置其他标签作为它的子元素。

undefined

在此，也可以这样写。

function App() {
  return (
    <>
      <h1>title1</h1>
      <h2>title3</h2>
      <h3>title3</h3>
    </>
  );
}
undefined

这被称为片段。
你也可以写作…，但一般来说，更常见的是用空标签来代替。
使用片段，您可以将多个元素组合在一起，而不会对HTML的内容产生影响。

2. 一定要闭合标签

有些情况下，在HTML标签中可以省略结束标签。

<ul>
    <li>apple
    <li>banana
    <li>cherry
</ul>
<input type='text'>

可以省略标签的闭合标签。
此外，标签本身就没有闭合标签。

让我们将它们写成JSX。

function App() {
  return (
    <ul>
        <li>apple
        <li>banana
        <li>cherry
    </ul>
    );
}

function App() {
  return (
    <input type='text'>
      );
}

这些结果最终都会变成错误。

undefined
function App() {
  return (
    <>
      <ul>
        <li>apple</li>
        <li>banana</li>
        <li>cherry</li>
      </ul>
      <input type='text' />
    </>
  );
}

关于像``标签这样本来没有闭合标签的情况，可以通过在末尾加上斜杠来表示已经闭合了。
※在HTML中，也可以在末尾加上斜杠，它可以正确显示。

undefined

3. 属性名称要使用驼峰命名法

HTML标签具有常见的属性，如id和class，以及事件处理程序属性，例如onclick。

<input id="input_form" class="required">
<button onclick="(()=>alert('clicked'))();">click me!</button>

我会先把它作为JSX原样写下来，进行试验。

function App() {
  return (
    <>
      <input id="input_form" class="required" />
      <button onclick="(()=>alert('clicked'))();">click me!</button>
    </>
  );
}
undefined

首先，在JavaScript中，class是一个保留词，无法使用class关键字。
JSX是一个JavaScript对象，在转换成对象的过程中，属性被设定为键。
由于保留词无法作为键使用，所以会报错。

如果您想要设置class属性，可以使用className作为替代。

另外，onclick属性也出现了错误。
这是因为在React中，许多属性都是以驼峰命名法准备的。
因此，请确保在属性中使用驼峰命名法，包括刚才确认过的className。

正确记录如下所示。

function App() {
  return (
    <>      
      <input id="input_form" className="required" />
      <button onClick={() => alert('clicked')}>click me!</button>
    </>
  );
}

※在中括号中的部分与上一个例子稍有不同。关于这种写法，我们会在下次或以后进行解释。

总结

我确认了JSX中的细节以及编写标记的规则。现在，我们应该能够创建一个简单的网页。

以上是一种可能的翻译，也可根据具体语境进行微调。

不过，单凭这些还远远不能完全理解React的功能。
下一篇文章将介绍如何在JSX中使用JavaScript变量。
点击这里查看第三部分
（下一篇文章正在努力创作中。）

请提供您参考的网站。

    • REACTを学ぶ-JSX でマークアップを記述する
    • kinsta – Reactで使用するJSXの基本をわかりやすく解説
    • Zen – React17におけるJSXの新しい変換を理解する
    【2023年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript
✖
广告
将在 10 秒后关闭
bannerAds