Question

我刚刚开始学习反应，我不明白为什么会发生这种情况。我的代码只是创建一个随机数并显示在DOM中，然后说这个数是大数还是小数。

我已将 react-dom、react 和 Babel 添加到我的脚本中。 Here's 我的代码笔。

这是我的 HTML 代码。

<div id="root"></div>
<div id="rand"></div>

这是我的 JavaScript 代码。当我有 <p>{bigOrSmall} Number !</p> 时，rand 组件没有被呈现。当我删除此行时，它起作用并显示随机数 Your Random Number : [anything]。

const Head = () => {
  return <h1>Random Number</h1>
}
const RandomNum = () => {
  const rand = Math.floor(Math.random() * 10);
  if (rand >= 5) {
    const bigOrSmall = "Big"
  }
  else {
   const bigOrSmall = "Small" 
  }
  return (
    <>
      <p>Your Number is: {rand}</p>
      <p>{bigOrSmall} Number !</p>
    </>
  );
}

ReactDOM.render(<Head/>, document.getElementById("root"))
ReactDOM.render(<RandomNum/>, document.getElementById("rand"))

Answer 1

问题是您的 RandomNum 组件中存在范围错误。您需要在 bigOrSmall 语句之外定义 if。以下将起作用：

const RandomNum = () => {
  let bigOrSmall;
  const rand = Math.floor(Math.random() * 10);
  if (rand >= 5) {
    bigOrSmall = "Big"
  }
  else {
    bigOrSmall = "Small" 
  }
  return (
    <>
      <p>Your Number is: {rand}</p>
      <p>{bigOrSmall} Number !</p>
    </>
  );
}

Answer 2

const 是块范围的。所以你的变量在花括号之外是不可访问的。

在花括号上方使用 let bigOrSmall; 并在其内部操作它们的值。

当您将变量移到外面时，现在它的作用域是函数组件的花括号，从 Random = () => { 开始到最后一行 } 结束。

React 组件没有被渲染

2 个答案: