javascript - 使用react.js将html <img> 组件作为参数属性传递到 <li> 标签中

Question

我将一个字符串转换为一系列图像标签，如下所示:

for (var i = 0; i < cardCollection.length; i++) {
  cardCollection[i].manaCost = cardCollection[i].manaCost.replace(/\{([0-z]+)\}/g, "<img src='\\data\\img\\$1.png' height='20px'/>");
}

这会将类似 {1}{G} 的内容转换为

<img src='./data/img/1.png' height='20px'/><img src='./data/img/G.png' height='20px'/>

我认为路径设置正确，因为它所在的 js 文件与“data”文件夹位于同一文件夹中(并且我尝试过在/data 之前使用或不使用 . )。然后我想将此 html 插入到现有的 < li> 组件中:

< ul onClick = {this.handleListClick} > 
{ cardCollection.map(function(card) {
    if (card.manaCost != undefined) {
        return <li>{card.name} {card.manaCost} </li>; 
    }
    else {
        return <li>{card.name}</li > ;
    }
  })
} < /ul>

这个“有效”是因为它向我显示了原始 html 和图像标签，但不是我想要获取的实际图像。从 card.manaCost 周围删除 {} 只会得到“card.manaCost”。假设我的路径是正确的，我需要做什么才能让它将其解析为实际的 HTML？

Answer 1

如果您希望解析 HTML 字符串，可以使用 dangerouslySetInnerHTML属性:

<ul onClick = {this.handleListClick}> 
{ cardCollection.map(function(card) {
    if (card.manaCost != undefined) {
        var html = card.name + ' ' + card.manaCost;
        return <li dangerouslySetInnerHTML={{__html: html}} />;
    }
    else {
        return <li>{card.name}</li>;
    }
  })
} </ul>

但是，请注意这看起来有多糟糕。这是故意的，因为 React 团队不希望你使用它:

Improper use of the innerHTML can open you up to a cross-site scripting (XSS) attack. Sanitizing user input for display is notoriously error-prone, and failure to properly sanitize is one of the leading causes of web vulnerabilities on the internet.

我建议不要改变数组(即删除 for 循环)并直接创建图像作为 React 元素:

<ul onClick = {this.handleListClick}> 
{ cardCollection.map(function(card, i) {
    var manaCost;
    if (card.manaCost) {
      manaCost = card.manaCost
        .match(/\{[0-z]+\}/g)
        .map(function (basename, i) {
          var src = './data/img/' + basename.substring(1, basename.length - 1) + '.png';
          return <img key={i} src={src} height='20px' />;
        });
    }
    return <li key={i}>{card.name} {manaCost}</li>;
  })
} </ul>