reactjs - React 中的导入对象未定义

Question

在 react 中:

wording.js

export  const wording = {
  id1: 'record',
  id2: 'play'
};

test.js

import { wording } from "...";

function Test(props) {

  const onCellClicked = (e) => {
    console.log("Hello", wording.id1);
    if(wording.id1 ) {
      ...
    }
  }

  return (
    <button onClick={onCellClicked} >Press me</button>
  )

}

当我打电话并按下按钮时，console.log 正确响应(获取 record)。但是，通过使用 Chrome 开发工具并在 if 上放置一个断点，wording 未定义!!对此有什么合乎逻辑的解释吗？

Answer 1

... putting a break-point on if, wording is not defined ...

Wich 措辞 ?在您的文件中，您有 2 个地方使用了 wording。

在react文件中，有2个地方有特定的变量

• 导入的地方
• 你引用它的地方(使用它)

如果你将鼠标悬停在你使用它的地方，你会看到变量值

例如

但是如果你将鼠标悬停在你导入它的地方，它将是未定义的

发生这种情况是因为导入的变量超出范围，您肯定无法看到它的值。