React 基础入门指南教程 - 翻译 react-book - 第一章 - 基础

JSX

Twitter 上关注我,很高兴接受您对主题或改进的建议 /克里斯

本章涵盖以下主题:

  • 什么是 JSX: JSX 是你在 React 中一直使用的东西,后面让我们解释一下它是什么。
  • 为什么使用它: 你可以选择不使用 JSX,但几乎没有人这样做,它确实让你的编程更简单。

是什么和为什么

JSX 就是很像你在 JavaScript 中写 XML. 这是一个预处理器步骤. 你不必拥有它,但它让编程变得轻松多了。

简单示例

这是一行代码的一个简单示例:

const Elem = <h1>Some title</h1>;

// and you can use it in React like so:
<div>
  <Elem />
</div>;

Elem 的上述声明在 JavaScript 中看起来很像 XML。 怎么回事? 当它被处理时,它变成以下 ES5 代码:

React.createElement("Elem", null, "Some title");

所以调用 createElement,这些参数是这样的:

  • 第一个参数,参数名称Elem 成为元素名称。
  • 第二参数, 属性:上面的第二个参数为 null,表示我们传入任何元素属性,因为我们没有给 Elem 传入任何属性。
  • 第三个参数,元素值:第三个也是最后一个参数是元素值。(h1 标签里的内容)

使用属性(或参数)的示例

让我们看下面的一个示例,我们给 Elem 传入一个属性 title:

const Elem = <h1>Some title</h1>;

// usage:
<div>
  <Elem title="a title">
</div>

以上将被编译成下面这样的代码:

React.createElement(
  "Elem",
  {
    title: "a title",
  },
  "Some title"
);

上面我们可以看到我们的属性 title 现在是第二个参数的一部分。

多行

大多数时候,你的组件用一行代码放不下,要另起多行时,它有时候不会发挥作用。

解决方案是将多个元素包装在一个括号 () 中,如下所示:

const Elem = (
  <div>
    <h1>Some title</h1>
    <div>Some content</div>
  </div>
);

父类组件

JSX 组件需要有一个父级。以下内容不正确:

<!-- would be incorrect, no parent element -->
const Elem = (
  <h1>Some title</h1>
  <div>Some content</div>
)

您可以通过以下方式解决此问题:

  • 将它包裹在一个元素中,您可以像这样将内容包装在 div 元素中:
const Elem = (
<div>
  <h1>Some title</h1>
  <div>Some content</div>
</div>
)
  • 或者把它包裹在 React.Fragment 组件中, 像下面这样:
const Elem = (
<React.Fragment>
  <h1>Some title</h1>
  <div>Some content</div>
</React.Fragment>
)

我们更经常使用 React.Fragment 来代替 div。

总结

这几乎是我们在 JSX 知识上需要了解的全部内容,以便能够使用它:

  • 它很像 XML,它的内部原理是使用 React.createElement() 来生成代码。
  • 多行需要括号才能工作。
  • 你需要有一个父元素,React.Fragment 是很好的选择。

其他精彩文章

作者:随风
公众号:求知编程技术
福利一:在微信后台回复「领取资源」,获取 IT 资源 200G 干货大全
福利二:公众号回复 “1”,拉你进程序员技术讨论群