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"));

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

Answer 1

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

return msg;

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