JSX的详细指南

ReactJS初学者指南（免费）的前几个视频都是关于React元素和JSX的。所以在这里，你可以和这篇博文一起观看。 享受吧!

现在来看看这篇博文!

我认为理解如何有效使用React的一个关键部分是理解JavaScript和JavaScript表达式。所以我将向你展示几个JSX的例子和它的编译版本，以帮助你了解这一切是如何运作的。只要你能在头脑中编译JSX，你就能更有力地使用这个抽象概念。

下面是我们最简单的例子。

注意，所有的例子都是赋值给一个变量ui ，只是为了说明这些是常规的JavaScript表达式，你可以赋值给一个变量。

ui = <div id="root">Hello world</div>
ui = React.createElement('div', {id: 'root'}, 'Hello world')

如上图所示，JSX被编译成React.createElement 。到React.createElement 的API是：

function createElement(elementType, props, ...children) {}

• elementType 可以是一个字符串或一个函数（类），表示要创建的元素的类型
• props 是一个对象，表示我们希望应用到该元素的道具（如果我们没有指定道具，则 ）。null
• ...children 是所有我们希望应用于该元素的子元素。这只是一个方便，我们可以写一个与上面相同的东西。

ui = React.createElement('div', {id: 'root', children: 'Hello world'})

如果你有一个以上的孩子，那么你就使用一个数组：

ui = (
  <div>
    <span>Hello</span> <span>World</span>
  </div>
)
ui = React.createElement('div', {
  children: [
    React.createElement('span', null, 'Hello'),
    ' ',
    React.createElement('span', null, 'World'),
  ],
})

// Note: babel uses the third argument for children:
ui = React.createElement(
  'div', // type
  null, // props
  // children are the rest:
  React.createElement('span', null, 'Hello'),
  ' ',
  React.createElement('span', null, 'World'),
)

你从React.createElement 调用得到的实际上是一个简单的对象：

// <div id="root">Hello world</div>
{
  type: "div",
  key: null,
  ref: null,
  props: { id: "root", children: "Hello world" },
  _owner: null,
  _store: {}
};

当你把这样一个对象传递给ReactDOM.render 或其他渲染器时，渲染器的工作就是解释这个元素对象，并从中创建 DOM 节点或其他东西。很好吧！？

这里还有几个例子供你参考：

ui = <div>Hello {subject}</div>
ui = React.createElement('div', null, 'Hello ', subject)

ui = (
  <div>
    {greeting} {subject}
  </div>
)
ui = React.createElement('div', null, greeting, ' ', subject)

ui = <button onClick={() => {}}>click me</button>
ui = React.createElement('button', {onClick: () => {}}, 'click me')

ui = <div>{error ? <span>{error}</span> : <span>good to go</span>}</div>
ui = React.createElement(
  'div',
  null,
  error
    ? React.createElement('span', null, error)
    : React.createElement('span', null, 'good to go'),
)

ui = (
  <div>
    {items.map(i => (
      <span key={i.id}>{i.content}</span>
    ))}
  </div>
)
ui = React.createElement(
  'div',
  null,
  items.map(i => React.createElement('span', {key: i.id}, i.content)),
)

请注意，无论你在{ 和} 里面放了什么，都不会被发现。这被称为插值，允许你动态地将变量注入道具和子节点的值中。由于这种工作方式，插值的内容必须是JavaScript表达式，因为它们基本上是对象赋值的右手，或者作为函数调用的参数使用。

总结

如果你想再玩一玩，你可以用Babel的在线REPL进行在线尝试。从这里开始。 希望这能帮助你更多地了解JSX的工作原理以及如何更有效地使用它。祝您好运!