React文档（十四）深入JSX

Posted 2020-09-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React文档（十四）深入JSX相关的知识，希望对你有一定的参考价值。

根本上，JSX只是为React.createElement(component, props, ...children)函数提供语法糖。JSX代码是这样的：

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

编译成这样：

React.createElement(
  MyButton,
  {color: ‘blue‘, shadowSize: 2},
  ‘Click Me‘
)

你也可以使用自己闭合的标签块如果它们没有子元素。

<div className="sidebar" />

编译成这样：

React.createElement(
  ‘div‘,
  {className: ‘sidebar‘},
  null
)

如果你想要测试JSX是怎样转换成js的，你可以试一试在线Babel编译器。

以上是关于React文档（十四）深入JSX的主要内容，如果未能解决你的问题，请参考以下文章