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

如何通过他的名字作为字符串来调用函数？

1 个答案: