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 表达式。 但是在使用花括号时，我收到错误（在第 1 行，写为注释），“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 不允许姊妹元素没有父元素。 代码中的 Person 元素是姐妹元素。 您可以将它们封装在一个 div 中，但不要将不必要的标签添加到您的 UI 中，您可以将它们封装在一个 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>
    );
  }
}