Question

在React's documentation中出现以下示例：

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

此代码有效，但我不理解如果ReactDOM.render在element范围内，const element怎么可能调用tick()。

我了解在javascript中，由于作用域的原因，无法从外部调用函数内部的变量（在这种情况下为常量）。那么，为什么或此React代码如何工作？

Answer 1

setInterval(tick, 1000);

tick是每个1 secs间隔定义的回调函数。

因此，在调用tick时，在其主体内有const element的定义。因此，它在tick范围内并且可以访问。

Answer 2

我想您只是忘记了在ReactDOM.render范围内您还叫过tick。这意味着ReactDOM.render和const element都在tick函数的范围内

Answer 3

如果const element不在函数范围内，那么它将无法访问它，但是请在此处检查函数tick()是什么在调用{{1} }，并且在ReactDOM.render内定义了常量element，因此function tick()的render方法完全可以访问react常量，请正确检查花括号在哪里闭合，在element

中调用函数后立即关闭

函数作用域如何与React一起工作？

3 个答案: