如何使用forEach向innerHTML添加Array内部的内容？

Question

我想知道如何使用forEach将数组内的数据内容添加到innerHTML？

出于某种原因，它没有显示。这可能吗？我正在以这种方式处理动态数据，我需要遍历数据并使用innerHTML显示它们。

const showPosts = (data, value) => {
    const btnDiscover = document.querySelector('[data-show="discover"]');

    const slides = data.add_post_slides;

    const Posts = () => {
        slides.length > 0 &&
            slides
                .forEach((el) => {
                    return <h2>123</h2>;
                })
                .join('');
    };

    // console.log(Posts());

    btnDiscover.addEventListener('click', (e) => {
        e.preventDefault();
        body.classList.add('toggle-legend', 'no-scroll');

        console.log('Discover clicked');
        console.log(slides);

        theContent = `
        <div class="modal">
            <div class="modal__body">
                <a href="#" id="close"><span class="modal__close"></span></a>

                ${Posts()}
            </div>
        </div>
        `;

        timelineModal.innerHTML = theContent;

        onModalClose();
    });
};

我该怎么做？

Answer 1

有很多方法。我可以建议使用getElementById来选择元素。之后，创建一个将数据添加到该元素的innerHtml中的函数。尝试在下面做类似的事情

var fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);

function myFunction(item, index) {
  document.getElementById("demo").innerHTML += index + ":" + item + "<br>";
}

Answer 2

forEach不返回响应。使用Array.map或声明并初始化数组变量，然后推送它们。

const newSlides = slides.map((el) => el)

或

const elements = [];
slides.forEach((el) => elements.push(el));

// Add return. your arrow function don't return element.
const Posts = () => {
    return slides.length > 0 &&
        slides
            .forEach((el) => {
                return <h2>123</h2>;
            })
            .join('');
};