reactjs - 为什么我在 React 中返回时需要一个额外的包装器？

Question

所以，我开始学习 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"));

但是，如果我将返回值包裹在这样的 div 中 <div>{msg}</div>错误消失了。我很困惑为什么会这样？因为 msg 变量只有一个父级，所以返回也只有一个父级，所以为什么我需要那个额外的 div 容器？

Answer 1

通过这样写，它被解释为一个对象，只有一个名为 msg 的键。 .无需包装 JSX 标签，您只需编写:

return msg;

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