Question

所以我相对较新，对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中的含义或反应

 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一起编写。当您将人员分配给该HTML片段时，React正在幕后工作，将该HTML转换为JS对象。

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

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

Answer 2

person只是一种反应元素，你可以在组件的任何地方使用它，或者你可以说它是一个变量，默认情况下，在你已经编写的代码中完全填充你的条件之后它是null，你已经将元素分配给了变量

Answer 3

<Person />是一个组件，可以呈现每个元素this.state.person let person = null;声明可以将所有this.state.person元素保存为组件集。
如果showPerson ture则显示所有人。

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)} 
      />
})

功能maping人。它想要

<div>
     <Person key="value" name="name" age="age" changed="func" click="func"/>
     <Person key="value" name="name" age="age" changed="func" click="func"/>
     <Person key="value" name="name" age="age" changed="func" click="func"/>
</div>

然后，在return语句中。如果showPerson = true那么

person = <div>
            <Person key="value" name="name" age="age" changed="func" click="func"/>
            <Person key="value" name="name" age="age" changed="func" click="func"/>
            <Person key="value" name="name" age="age" changed="func" click="func"/>
       </div>

其他person = null然后

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} //all person will show here
    </div>
 )

React：理解语法

3 个答案: