为什么eval（）对于导入的函数不起作用？

T.C 发表于 Dev

在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"？

感谢您的帮助。

硬盘

尝试这个：

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>
  );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。