Question

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

Code Sandbox link

第二个问题：如Mhd的回答所示，为什么import * as alerts from "./alertY"起作用而import { alertY } from "./alertY"却不起作用？

谢谢您的帮助。

Answer 1

尝试：

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

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

1 个答案: