React Native-将javascript文件作为文本导入到另一个javascript文件中

Question

我有一个MyFirstPage.js文件，它是这样的：

renderCards() {
  let icon = this.state.icon;
  ....
  ....
  ....
}

我写的用来在我的主要渲染功能中渲染卡的内容！ 关键是，因为它变得太长（大约350行），我想创建另一个文件并以文本形式导入renderCards()这样我就可以在MyFirstPage.js主渲染器中使用它了！ 请注意， let icon = this.state.icon; 它引用MyFirstPage.js状态-因此我必须将其作为TEXT导入。

我试过了：

export default {
  renderCards() {
      ....
      ....
      ....
      }
}

但不起作用！

任何想法？

提前致谢！

Answer 1

您可以在字符串中定义代码并用Javascript执行。 我们可以使用eval()将String评估为一段代码。 这种方法具有安全性，可靠性和性能方面的问题，因为eval实质上可以将代码注入脚本中，并且该代码仅由传递给它的String来确定。 就是说，大多数Babel转译预设都使用严格模式，并且最终不允许在实例范围内实例化新变量，从而在一定程度上限制了eval 。 它仍然可以做的是定义一个函数并评估该函数并将其分配给外部作用域中的变量，如下所示：

var a = 5
var b = 10
var c = eval('function abc() { return a + b }; abc;')
assert(c() === 15)

有了此功能，我们可以将您的整个“ renderCards”函数定义包装在String中（通过模板文字）：

export default `renderCards() {
  let icon = this.state.icon;
  ....
  ....
  ....
}; renderCards;`

导入此字符串（ import renderCardsImport from {relative path to file} react组件MyFirstPage.js中的import renderCardsImport from {relative path to file} ，在构造函数中，您需要做一些事情：

constructor(props){
   super(props)
   this.state = {
      icon: // whatever this is
   }
   let renderCards = eval(renderCardsImport)
   // so you have access to the parent class object this
   this.renderCards = renderCards.bind(this)
}

现在，您应该可以在render()方法或组件中的其他任何地方调用renderCards()了。 Phewww。 那真是个笨蛋，但对评估，严格模式等学到了很多东西。希望对您有所帮助。

编辑：您还可以使用它出现的Function构造Function ，如var myFunct = Function('body of function with a return statement')但您也需要记住将其绑定this 。 如果使用功能，则可以避免性能和安全性受到影响。 严格模式消除了大多数可靠性问题。