为什么 ReactJS 组件，它是一个 function，必须放在 ReactDom.render() 方法的内部标签中？

Question

一般来说，我对 ReactJS 和 JavaScript 非常陌生，所以我很难理解语法。

我有以下非常基本的组件：

import React from 'react'
import ReactDom from 'react-dom'

function Greetings()
{
  return <h1>Hello World</h1>
}

我正在尝试使用以下行进行渲染：

ReactDom.render(<Greetings/>, document.getElementById('root'))

现在我很难理解语法：

ReactDom.render(<Greetings/>, document.getElementById('root')) ，其中Greetings()是 function。

那么将它包含在标签中是什么意思呢？

Answer 1

语法称为JSX 。 通过使用 JSX，您可以有效地调用React.createElement() 。 因此，如果您不想使用 JSX ( <Component> )，可以将其替换为React.createElement(Component) 。 事实上，当你使用 React 时，这就是 Babel 所做的：将所有 JSX 标签替换为对React.createElement的调用。