2

import TestClass from './TestClass'

How do I reference TestClass in this file given the string 'TestClass'?

eval('TestClass') doesn't work because TestClass is not defined.

However, if I do let Test = TestClass, and then eval('Test'), it returns me the constructor for TestClass, as desired.

Why does eval('TestClass') not work when eval('Test') does?

Context: Given many elements like <div data-class="TestClass"></div>, I want to create a generic function that renders the appropriate React components into them. These component classes will be imported into the file before executing this function.

Note: Using Brunch (similar to webpack) as the build system.

al_
  • 93
  • 5
  • What's your package system? Webpack? Browserify? – Rushy Panchal Aug 04 '16 at 04:01
  • 2
    You better reconsider your solution. The whole point of new module system - is that it can be statically analised. Since you cannot `import` dynamically - there is no much point to instantiate dynamically. – zerkms Aug 04 '16 at 04:01
  • does [MDN documentation](https://developer.mozilla.org/en/docs/web/javascript/reference/statements/import) help you with what you can and can't achieve? – Jaromanda X Aug 04 '16 at 04:02
  • @RushyPanchal Using Bruch as the build system – al_ Aug 04 '16 at 04:03
  • @JaromandaX Looked at MDN, no luck. I think this is a bit more unconventional – al_ Aug 04 '16 at 04:19
  • "a bit more unconventional" --- it's not, it just makes harder to write spaghetti-code. – zerkms Aug 04 '16 at 04:53
  • 1
    "*Why does `eval('TestClass')` not work?*" - it would in a real ES6 environment. It's just that imported variables are transpiled to property accesses on the respective module. – Bergi Aug 04 '16 at 05:32

1 Answers1

2

I don't know what Brunch does, but you can just create an object with components after importing and use that to retrieve the component given a string. Something like:

import TestClass1 from './TestClass1'
import TestClass2 from './TestClass2'

const componentMap = {
  TestClass1: TestClass1,
  TestClass2: TestClass2
}

// You can just use the map to get the component given the name
const component = componentMap[componentName]
Varun Gupta
  • 2,870
  • 6
  • 33
  • 73
  • Thanks! This will work. Is there any automated way to define `componentMap` given `['TestClass1', 'TestClass2'] `? – al_ Aug 04 '16 at 04:34
  • @AlishanLadhani: No. – Felix Kling Aug 04 '16 at 04:51
  • 3
    @AlishanLadhani `const componentMap = { TestClass1, TestClass2 };` <- this would be the same but without duplication. – zerkms Aug 04 '16 at 04:54
  • @zerkms Thanks. Better than duplicating the names. But do I have to write it out by hand? Given an arbitrary length array of strings, can I create `componentMap` with some kind of loop? – al_ Aug 04 '16 at 05:29
  • @AlishanLadhani: Why do you start with strings? Start with the classes that you already imported explicitly. Of if you are generating those automatically, just generate the `componentMap` object literal in the same way. – Bergi Aug 04 '16 at 05:33