时间戳

首页 > 解决方案 > 为什么我在 React 中返回时需要一个额外的包装器？

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

问题描述

所以，我开始学习 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 容器？

标签： reactjs

解决方案

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

return msg;

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

推荐阅读