Как сопоставить строку шаблона в операторе switch с js? - PullRequest
Новая
       29

Как сопоставить строку шаблона в операторе switch с js?

0 голосов
/ 08 июля 2019

У меня есть функция, которая возвращает компонент, который зависит от пути к окну. 

getComponentByPathname = (pathname) => {
    switch(patname){
      case "/view1": return <ViewOneComponent>;
      case "/view2": return <ViewTwoComponent>;
}

Но проблема начинается, когда я пытаюсь оценить строку шаблона с одним идентификатором 

getComponentByPathname = (pathname) => {
    switch(pathname){
      case "/view1": return <ViewOneComponent>;
      case "/view2": return <ViewTwoComponent>;
      case `/view3/${getId()}`: return <ViewThreeComponent>;

}

Работает только с первыми двумя случаями.Зачем?Также я делаю еще одну попытку.В этом случае я буквально вставляю строку с идентификатором в третьем случае, например: 

case "view3/1234567": return <ViewThreeComponent>;

И работает.Но проблема в том, что я не могу жестко закодировать идентификатор в строке.

Как я могу это оценить?

Ответы [ 2 ]

1 голос
/ 08 июля 2019

Я думаю, что getId () возвращает значение, отличное от того, что вы ожидаете.Я хотел бы попробовать следующее и сделать так, чтобы getId () возвращало ожидаемое значение при вычислении 

getComponentByPathname = pathname => {
  const case3 = `/view3/${getId()}`;
  console.log(`case3 = ${case3}`);
  console.log(`pathname = ${pathname}`);

  switch (pathname) {
    case '/view1':
      return <ViewOneComponent>;
    case '/view2':
      return <ViewTwoComponent>;
    case case3:
      return <ViewThreeComponent>;
  }
};

Но если вам нужно только решить, какой компонент рендерить, основываясь на вашем пути, то что-то вроде этого можетбыть более подходящим

const examplePaths = ['view1/', 'view2/', 'view3/', 'view3/1241232', 'view3/8721873216', 'view4/', 'vi/ew1', ''];

const mapper = {
  view1: 'ViewOneComponent',
  view2: 'ViewTwoComponent',
  view3: 'ViewThreeComponent'
};

examplePaths.forEach(ent => {
  const splitPaths = ent.split('/');

  const mapped = mapper[splitPaths[0]];
  if (mapped) {
    console.log(mapped);
  } else {
    console.log('Path not supported');
  }
});
1 голос
/ 08 июля 2019

Хорошо работает здесь 

function getId() {
  return 1234567
}

function test(pathname) {
  switch (pathname) {
    case '/view1':
      return 'ViewOneComponent'
    case '/view2':
      return 'ViewTwoComponent'
    case `/view3/${getId()}`:
      return 'ViewThreeComponent'
    default:
      return 'fail'
  }
}

console.log(test('/view3/1234567'))
...