Импортировать объект в React не определено

Question

В реакции:

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 Dev Tools и устанавливая точку останова на if, wording не определяется !! Любое логическое объяснение этому?

Answer 1

... установка точки останова, если wording не определено ...

Какой wording? В вашем файле у вас есть 2 места, где вы используете wording.

В файле реакции есть 2 места с определенной переменной

• Место, куда вы ее импортируете
• Место, куда вы ссылаетесь (используйте его)

Если вы наведите курсор на то место, где вы его используете, вы увидите значение переменной

например

Но если вы наведете курсор на то место, куда вы его импортируете, оно будет неопределенным

Это происходит потому, что переменная импорта находится вне области видимости, и вы наверняка не сможете увидеть ее значение.