JSX中的花括号是什么意思？如果它表示Javascript表达式，那么为什么给出错误，“ JSX元素必须有一个父元素？”

Question

我编写了如下代码：

import React, {Component} from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {

  state = {
    persons: [
      {name: 'A', age: 20},
      {name: 'B', age: 21},
      {name: 'C', age: 22}
    ],
    city: 'New Delhi',
    showPerson: false
  }

  togglePerson = () => {
    this.setState({
      showPerson: !this.state.showPerson
    });
  }

  changeNameHandler = (name) =>{
    this.setState({
      persons: [
        {name: 'AA', age: 20},
        {name: name, age: 21},
        {name: 'CC', age: 22}
      ]
    });
  }

  render(){
    console.log("Hello India ");
    return (
      <div className="App">
        <button onClick={()=> this.togglePerson() }>Toggle Person</button>
        {

          <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
          <Person name={this.state.persons[1].name} age={this.state.persons[1].age}>My hobby is Car Racing</Person>
          <Person name={this.state.persons[2].name} age={this.state.persons[2].age}>My hobby is Cooking</Person>

        } //Line 1
      </div>
    );
  }
}

export default App;

在此代码中，我在JSX中使用了花括号，因此可以将花括号中的代码视为Javascript表达式。但是在使用花括号时，我遇到了错误（在Line1，写为注释），“ JSX元素必须有一个父元素”。

为什么会这样？我读过React认为代码是用大括号写的Javascript表达式。那么为什么期望我只从花括号部分返回一个元素，尽管React应该将其视为Javascript表达式，而不是JSX元素。

Answer 1

您只需要除去包装JSX组件的花括号：

render(){
    console.log("Hello India ");
    return (
      <div className="App">
        <button onClick={()=> this.togglePerson() }>Toggle Person</button>
          <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
          <Person name={this.state.persons[1].name} age={this.state.persons[1].age}>My hobby is Car Racing</Person>
          <Person name={this.state.persons[2].name} age={this.state.persons[2].age}>My hobby is Cooking</Person>
      </div>
    );
  }

或者，您可以保留花括号（虽然不是必需的，也可能不应该），并在Person组件周围添加包装元素：

render(){
    console.log("Hello India ");
    return (
      <div className="App">
        <button onClick={()=> this.togglePerson() }>Toggle Person</button>
        {
          <div>
            <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
            <Person name={this.state.persons[1].name} age={this.state.persons[1].age}>My hobby is Car Racing</Person>
            <Person name={this.state.persons[2].name} age={this.state.persons[2].age}>My hobby is Cooking</Person>
          </div>
        } //Line 1
      </div>
    );
  }

Answer 2

由于这些元素没有父元素，所以发生了错误：

<Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
<Person name={this.state.persons[1].name} age={this.state.persons[1].age}>My hobby is Car Racing</Person>
<Person name={this.state.persons[2].name} age={this.state.persons[2].age}>My hobby is Cooking</Person>

这些是有效的JSX元素，而不是Javascript表达式，因此不应使用花括号将它们包装起来。

这是Javascript表达式的示例

this.state.persons[2].name

您适当地用大括号包裹了。

Answer 3

[React不允许姐妹元素不具有父元素。您代码中的人员元素是姐妹。您可以将它们封装在div中，但不要在用户界面中添加不必要的标签，可以将它们封装在Fragment <> Sister elements here </>中，如下所示

class App extends Component {

  state = {
    persons: [
      {name: 'A', age: 20},
      {name: 'B', age: 21},
      {name: 'C', age: 22}
    ],
    city: 'New Delhi',
    showPerson: false
  }

  togglePerson = () => {
    this.setState({
      showPerson: !this.state.showPerson
    });
  }

  changeNameHandler = (name) =>{
    this.setState({
      persons: [
        {name: 'AA', age: 20},
        {name: name, age: 21},
        {name: 'CC', age: 22}
      ]
    });
  }

  render(){
    console.log("Hello India ");
    return (
      <div className="App">
        <button onClick={()=> this.togglePerson() }>Toggle Person</button>
        {
          <>
          <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
          <Person name={this.state.persons[1].name} age={this.state.persons[1].age}>My hobby is Car Racing</Person>
          <Person name={this.state.persons[2].name} age={this.state.persons[2].age}>My hobby is Cooking</Person>
          </>
        }
      </div>
    );
  }
}