Question

我需要根据数组中的值创建一个ul链接。链接已创建，但href属性是随机分配的，与我传入getUrl函数的实际值不对应。

到目前为止，这是我的代码：

  getURL (type) {
    let url
    switch (type) {  
      case 'Yahoo':
        url = 'https://www.yahoo.com/'

      case 'Bing':
        url = 'https://www.bing.com/'

      default:
        url = 'https://www.google.com'
    }
    return url
  }

和渲染：

  render () {
    let { expandList } = this.state

    let listItems = [
      'Google',
      'Bing',
      'Yahoo'
    ]

    let list = expandList
      ? listItems.map((item, index) => {
          return (
            <li key={index}>
              <a href={this.getURL(item)} target='_blank'>
                {item}
              </a>
            </li>
          )
        })
      : ''

    return (
      <div>
        <ul>{list}</ul>
      </div>
    )
  }

Answer 1

您需要在每个案例之后中断或从中返回。如果您不这样做，它将始终继续default，并返回Google网址。

＆＃13;

function getURL(type) {
  switch (type) {
    case 'Yahoo':
      return 'https://www.yahoo.com/'

    case 'Bing':
      return 'https://www.bing.com/'

    default:
      return 'https://www.google.com'
  }
}

console.log(getURL('Yahoo'));

console.log(getURL('Bing'));

＆＃13;

Answer 2

switch基本上会尝试将type与案例的参数进行匹配，并且当匹配时，它会在其下面的所有情况下执行代码，除非你明确地打破它。

default是一个包罗万象，以防case的所有内容都与type匹配。

使用switch执行此操作的正确方法是在执行case语句后将其中断。一种方法是插入break：

getURL (type) {
    let url
    switch (type) {  
      case 'Yahoo':
        url = 'https://www.yahoo.com/'
        break
      case 'Bing':
        url = 'https://www.bing.com/'
        break
      default:
        url = 'https://www.google.com'
    }
    return url
  }

你也可以像Ori Drori建议的那样在case语句中返回url，这不仅会突破开关，还会突破函数。

我还建议用分号结束你的陈述。即使它是可选的，它也可以防止意外错误。

另外，我建议使用type小写type.tolowercase()并将其与小写字符串匹配。

如果所有getURL都将网站名称映射到网址，则代码较少的替代方法是使用对象：

var nameToUrlMap = {
  'yahoo': 'https://www.yahoo.com/',
  'bing': 'https://www.bing.com/',
};

然后像：

一样使用它

var type = 'Yahoo';
var lowercasedType = type.tolowercase();
var url = nameToUrlMap[lowercasedType] || 'https://www.google.com/'; // falls back to google if name doesn't exist in nameToUrlMap
console.log(url); // "https://www.yahoo.com/"
console.log(nameToUrlMap['abcd'] || 'https://www.google.com/'); // "https://www.yahoo.com/"

如果需要，可以将其包装在函数中：

var nameToUrlMap = { 
  'yahoo': 'https://www.yahoo.com/',
  'bing': 'https://www.bing.com/',
};

function getURL(type) {
  var lowercasedType = type.tolowercase();

  var url = nameToUrlMap[lowercasedType] || 'https://www.google.com/'; // falls back to google if name doesn't exist in nameToUrlMap

}

您也可以使用const或let代替var。

从一组项目动态创建链接

2 个答案: