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 。 如果使用功能，則可以避免性能和安全性受到影響。 嚴格模式消除了大多數可靠性問題。