如何在 eval 中使用本地范围答案

【问题标题】：how use local scope with eval如何在 eval 中使用本地范围
【发布时间】：2019-01-04 16:10:58
【问题描述】：

我有一个使用 React 的模块 JS

 import React from 'react'

我的组件

export default class TaskDetail extends Component {...

我有一个代表代码的字符串：

str=`props => {
  return React.createElement(.....

我会在这样的模块 JS 中使用这段代码：

const MyCustomWidget = eval(str)

这样就等于写了：

const MyCustomWidget = props => {
  return React.createElement(.....

我使用 MyCustomWidget 在 react-jsonschema-form 中创建自定义元素

我的问题的重点是：在我的模块中我已经导入了 React 但我有错误 React is not defined 那是因为 eval 的结果有另一个范围...... 如果我写在我的模块上：

 window.React = React

有效！但我不想使用

可以使用 eval 并使用我的模块的范围吗？我想在我的模块中使用我导入的 React 变量而不使用 window.React=React

有可能吗？

【问题讨论】：

看看这里，可能会有帮助！ stackoverflow.com/questions/9781285/…
某事是可能的，并不意味着你应该去做。找到另一个不使用 eval 的模式。
如果可能的话，确实应该避免使用 Eval，但这应该是可能的：stackoverflow.com/a/43306962/3893820
好吧，理论上，但我不推荐它，只需使用 new Function( React, return ${str}` )( React );`。然后 React 将作为函数参数传递，该参数可在内部用于您的代码。不过不知道会不会有什么问题
你不能创建一个局部变量，它是一个返回你想要的函数的函数吗？您可以将参数传递给可在内部函数执行时使用的外部函数。我真的觉得eval 在这里是一个糟糕的解决方案。

标签： javascript reactjs react-redux

【解决方案1】：

如果你想尝试一下……

const evalInContext = a =>
    // eslint-disable-next-line no-new-func
    new Function('require', 'const React = require("react");' + a).bind(
        null,
        require
    );

查看他们如何在 react-styleguidist 的实时编辑器中评估和运行反应代码 https://github.com/styleguidist/react-styleguidist/blob/34f3c83e76/src/client/rsg-components/ReactExample/ReactExample.spec.js

再一次，如果您不能 100% 信任您评估的内容，请不要这样做。

【讨论】：