javascript - react : Understanding Syntax

Question

所以我对 React 比较陌生，对 Javascript 有一些基本的了解。我正在学习本教程，当讲师继续前进时，一切似乎都很清楚，但是当我再次开始阅读时，我无法理解这一点

 render() {
  let person = null;
if (this.state.showPerson) {
  person= (
    <div>
      {
        this.state.person.map((el, index) => {
          return <Person
          key={el.id}
          click={this.deletePersonHandler.bind(index)}
          name={el.name}
          age={el.age}
          changed={(event) => this.eventSwitchHandler(event, el.id)} />
        })
      }
   </div>
 );
}

虽然我知道它的作用和 if-statement 的用途，但我很难弄清楚这在 Javascript 或 React 中意味着什么

 person= (......
.....)

**console.log(typeof person)** 声明它是一个对象，但这似乎不是一个对象。那么这到底是什么以及为什么讲师使用它(下面是我返回的 html，我知道它被用来动态添加内容)

  return (
    <div className={classes.App}>
            <h1> Hi I am react App</h1>
            <p className={classese}>
            hey </p>
            <button className={btnClass}
            onClick={this.togglerPersonHandler}>Button</button>
            {person}
        </div>
     )

Answer 1

React 使用 JSX 语法允许 HTML 与 JS 一起编写。当您将 person 分配给该 HTML 片段时，React 会在幕后进行工作以将该 HTML 转换为 JS 对象。

例如，HTML <div>Hello World</div> 的片段实际上编译为 React.createElement("div", null, "Hello World");在 JS 中。

在这种情况下，person 变量对应于编译为 React 元素的 JSX 片段。