循環遍歷為錨鏈接分配值的數組

Question

我有一個看起來像這樣的數組["1352.jpg", "1353.jpg", "1354"] 。 我想遍歷這個數組並渲染以逗號分隔的項目的錨鏈接。 我在看這樣的東西， <a href='1352.jpg'>1352.jpg</a>, <a href='1353.jpg'>1353.jpg</a>, etc 。 我似乎無法讓它工作。 這就是我正在做的，但我沒有得到我想要的。

var images = ["1352.jpg", "1353.jpg", "1354"];
renderImages(images){
        var result;
        if(images != null && images.length > 0){
            result = images.map(obj => {
                var res = '<a href='+obj+'>obj</a>';
            });
            result = res.join(', ');
        }else{
             result = 'null';
        }
        return result;
    }

請問我在這里做錯了什么？

Answer 1

只需使用字符串插值，您的原始代碼缺少 map function 內的返回，並且您將obj直接寫入內部標簽

var images = ["1352.jpg", "1353.jpg", "1354"];
renderImages(images){
    if(!images || !images.length) {
      return null;
    }
    return images.map(obj => `<a href='${obj}'>${obj}</a>`);
}

我還想知道您是否打算返回null的文本版本或僅返回null所以在我的回答中我返回null 。

看到 Emile 的評論后，您確實使用reactjs對其進行了標記，在這種情況下，您可能應該只渲染 jsx 節點，您可以這樣做：

return (
  <div>
    { images && images.length && images.map( img => <a key={img} href={img}>{img}</a> ) 
  </div> );

Answer 2

const images = ['image1_url', 'image2_url', 'image3_url']
const app = document.getElementById('app');

function renderImages() {
    return images.map((link) => {
        const a = document.createElement('a');
        a.setAttribute('href', link);
        a.innerText = link;
        a.insertAdjacentText('beforeend', ', ');
        app.appendChild(a);
    });

}

renderImages()

Answer 3

首先想到的是這里缺少的 return 語句：

images.map(obj => {
            var res = '<a href='+obj+'>obj</a>';
           return res;
        });

或者只是刪除 {} 和變量聲明。

images.map(obj => '<a href='+obj+'>obj</a>');

然后改變result = res.join(", "); result = result.join(", ");

Answer 4

 const imageHrefs = ["1352.jpg", "1353.jpg", "1354.png"]; const container = document.getElementById('container'); imageHrefs.forEach((href) => { const a = document.createElement('a'); a.setAttribute('href', href); a.innerText = `Link to ${href}`; container.appendChild(a); container.appendChild(document.createElement('br')); })

 <div id="container"></div>

除了使用.map()之外，您還可以使用其他解決方案。

Answer 5

這行得通，只需對您的 map 和 join 語句進行一些調整。

 var images = ["1352.jpg", "1353.jpg", "1354"]; function renderImages(images) { var result; if(images.= null && images.length > 0){ result = images;map(obj => { return '<a href='+obj+'>obj</a>'; }). result = result,join('; '); }else{ result = 'null'; } return result. } list = renderImages(images) console.log(list)