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

Question

I've got a MyFirstPage.js file which is something like this:

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

Which i write to render my cards inside my main render function! The point is, because it's getting too long (about 350 lines), i want to create another file and import this renderCards() AS TEXT so i can i have it in the MyFirstPage.js main render! Please note that let icon = this.state.icon; which refer to the MyFirstPage.js state - so i have to import it AS TEXT .

I tried:

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

but not working!

Any idea?

Thanks in advance!

Answer 1

You can define code in a string and execute it in Javascript. We can use eval() to evaluate a String as a piece of code. This approach has a security, reliability, and performance concerns because eval can essentially inject code into your script, and that code is simply determined by what String is passed to it. That said, most Babel transpiling presets use strict mode, and this limits eval to some extent by ultimately not allowing it to instantiate new variables in the surrounding scope. What it can still do, is define a function and evaluate that function and assign it to a variable in the external scope like so:

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

With this ability in hand, we can wrap your entire 'renderCards' function definition in a String (by way of template literal):

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

Import this string ( import renderCardsImport from {relative path to file} in the react component MyFirstPage.js , and in the constructor you need to do a few things:

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

And now you should be able to call renderCards() in the render() method or anyplace else in the component. Phewww. That was a doozy, but learned so much about eval, strict mode, etc. Hope it helps.

EDIT: You can also use the Function constructor it appears, as in var myFunct = Function('body of function with a return statement') but you will need to remember to bind it to this as well. If you use Function, you avoid performance and security hit of eval. Strict mode takes away most of the reliability problems.