Почему в React eval () работает только для функций, которые определены в том же файле, но не для импортированных функций?
В моем примере кода alertY
- этоимпортированная функция и alertX
определены в том же файле.Когда имя функции передается в onClick
, оба alertX
и alertY
работают.
Однако, когда функция вызывается напрямую внутри eval в виде строки и затем передается в onClick
, работает только alertX
.alertY
вызвал ReferenceError следующим образом:
Uncaught ReferenceError: alertY is not defined
at eval (eval at onClick (index.js? [sm]:13)
src / index.js
import { alertY } from "./alertY";
function alertX() {
alert("x");
}
function App() {
return (
<div className="App">
<button onClick={alertX}>alertX</button>
<button onClick={alertY}>alertY</button>
<button onClick={() => eval(`alertX()`)}>evalX</button>
<button onClick={() => eval(`alertY()`)}>evalY</button>
</div>
);
}
src / alertY.js
export function alertY() {
alert("y");
}
Код Песочница ссылка
Второй вопрос: Как показано в ответе Mhd, почему import * as alerts from "./alertY"
работает, а import { alertY } from "./alertY"
не работает?
Спасибо за вашу помощь.