Как вызвать функцию по имени как String?

Question

Итак, я знаю, что этот вопрос задавался несколько раз, но я не могу найти решение, которое работает для меня, и я не понимаю, как это правильно работает.

Вот задействованная функция:

import form from "./form"; //return some html
function changePage(e){
    console.log(e.target.dataset.component) // equal "form"
    //loadComponent(form) => is working 
    loadComponent(eval(e.target.dataset.component)) // => form is not defined    
}

function loadComponent(name)
{
    const wtv = name()
    document.getElementById('app').append(wtv)
}

Так как я могу динамически звонить e.target.dataset.component?

Answer 1

Скорее всего, вам нужно сопоставить метки с функциями:

import form from "./form"; //return some html

const datasetToComponent = {
  'form': form
};

function changePage(e){
  if (datasetToComponent[e.target.dataset.component]) {
    loadComponent(datasetToComponent[e.target.dataset.component]);
  }  
}

function loadComponent(name) {
  const wtv = name()
  document.getElementById('app').append(wtv)
}