Reactjs 为什么我在返回时需要额外的包装？

所以，我开始学习React，我遇到了这个代码，我真的很困惑

以下代码给出了错误信息：

function getNum() {
  return Math.floor(Math.random() * 10 + 1);
}

class Number extends React.Component {
  render() {
    const num = getNum();
    let msg;
    if (num % 2 == 0) {
      msg = (
        <div>
          <h2>Even Number</h2>
          <p>The number is: {num}</p>
        </div>
      );
    } else {
      msg = (
        <div>
          <h2>Odd Number</h2>
          <p>The number is: {num}</p>
        </div>
      );
    }
    // THIS IS WHAT CAUSES ERROR
    return {msg};
  }
}

ReactDOM.render(<Number />, document.getElementById("root"));

函数getNum（）{ 返回Math.floor（Math.random（）*10+1）； } 类号扩展了React.Component{ render（）{ const num=getNum（）； 让味精； 如果（数值%2==0）{ 味精=( 偶数 号码是：{num}

); }否则{ 味精=( 奇数 号码是：{num}

); } //这就是导致错误的原因 返回{msg}； } } render（，document.getElementById（“根”））；

---

但是如果我像这样将返回值包装在div中

{msg}

错误就会消失。我很困惑为什么会这样？因为msg变量有一个单亲，所以返回也会有一个单亲，所以为什么我需要那个额外的div容器？

通过这样写，它被解释为一个带有一个名为

msg

的单键的对象。不使用JSX标记包装，您只需编写：

return msg;

---

当您需要运行javascript块或引用变量时，应在JSX标记中使用括号。

您不能返回

{msg}

，因为对象不是React的有效子对象

{msg}

是

{msg:msg}

的缩写。返回

（甚至只是

msg

）也行。@Dan为了再次确认我理解正确，只写

{msg}

计算为

{msg:msg}

但是将其写入

div

意味着既然我们在JSX中，我们只想将其作为Javascipt进行转义。但是为什么

div

包装器可以解决这个问题呢？因为当您使用

div

包装时，它现在位于JSX标记中。如果不使用

div进行包装，它就不是了。您可以了解更多信息