Javascript 从项目数组动态创建链接

我需要根据数组中的值创建一组链接。链接已创建，但

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

render（）{
设{expandList}=this.state
让listItems=[
“谷歌”，
"冰",，
“雅虎”
]
let list=expandList
？listItems.map（（项目，索引）=>{
返回(


)
})
: ''
返回(
{list}
)
}

您需要在每个案例之后中断或从中返回。如果您不这样做，它将始终保持

默认值

，并返回google url

函数getURL（类型）{ 开关（类型）{ “雅虎”案： 返回'https://www.yahoo.com/' 案例“Bing”： 返回'https://www.bing.com/' 违约： 返回'https://www.google.com' } } log（getURL（'Yahoo'）；

---

log（getURL（'Bing'）您需要在每个案例之后中断或从中返回。如果您不这样做，它将始终保持

默认值

，并返回google url

函数getURL（类型）{ 开关（类型）{ “雅虎”案： 返回'https://www.yahoo.com/' 案例“Bing”： 返回'https://www.bing.com/' 违约： 返回'https://www.google.com' } } log（getURL（'Yahoo'）；

---

log（getURL（'Bing'）

开关

基本上尝试将

类型

与大小写的参数匹配，当存在匹配时，它将在其下方的所有情况下执行代码，除非您显式打断它

默认值

是一个包罗万象的值，以防

案例

与

类型

不匹配

使用

开关

的正确方法是在执行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.tolowercase（）

将

type

小写，并将其与小写字符串匹配

如果getURL所做的只是将网站名称映射到url，那么代码较少的另一种方法是使用对象：

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

。

开关

基本上尝试将

类型

与参数匹配到大小写，当存在匹配时，它将在其下的所有大小写中执行代码，除非您明确地打破它

默认值

是一个包罗万象的值，以防

案例

与

类型

不匹配

使用

开关

的正确方法是在执行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.tolowercase（）

将

type

小写，并将其与小写字符串匹配

如果getURL所做的只是将网站名称映射到url，那么代码较少的另一种方法是使用对象：

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

。

你能不能让你的列表项成为一个包含名称和url的对象数组？你能不能让你的列表项成为一个包含名称和url的对象数组？