Почему eval () не работает для импортированных функций? - PullRequest
0 голосов
/ 08 июня 2019

Почему в 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" не работает?

Спасибо за вашу помощь.

1 Ответ

2 голосов
/ 08 июня 2019

попробуйте это:

import * as alerts from "./alertY";

function alertX() {
  alert("x");
}

function App() {
  return (
    <div className="App">
      <button onClick={alertX}>alertX</button>
      <button onClick={alerts.alertY}>alertY</button>

      <button onClick={() => eval(`alertX()`)}>evalX</button>
      <button onClick={() => eval(`alerts.alertY()`)}>evalY</button>
    </div>
  );
}
...