映射导致所有数组元素出现在 React 中

Question

我试图通过将标题存储在数组中并每次使用 html 元素映射来使 React 中的组件更加动态。但是，对于元素的每个映射，它都会输出标题数组中的所有值。我希望这样，第一次迭代具有第一个标题值，然后第二次迭代具有第二个标题，依此类推。对于任何不认识它的人来说，乱七八糟的 CSS 是 Tailwind。

** 这已解决 **

但是接下来，我还希望 Lorem 文本以与标题相同的方式从数组映射到哪里。

这是组件：

import * as React from 'react';

//Maps element based on the number of itterations
const itterations = [1, 2, 3, 4, 5, 6];
const headings = ['text', 'text2', 'text3', 'text4', 'text5', 'text6'];
const items = itterations.map((itterations) =>
    <div class="flex flex-row lg:flex-col mx-5 lg:mx-2 lg:mt-0 my-5 pb-5 items-center md:items-start lg:bg-white border-b-2 border-red-300">
        <a href="#" class="w-[26%] lg:w-full mr-5 lg:mr-0 rounded-sm"><img src="./images/elden-ring-thumbnail.jpg" alt="Lorem Impsum"></img></a>
        <div class="md:flex md:flex-col lg:px-3">
            <h6 class="font-bold lg:my-3">{headings}</h6>
            <p class="hidden md:block my-2 lg:my-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales.</p>
        </div>
    </div>
);

export default function RecentReviews() {
    return (
        <div class="mx-1 lg:w-[60%] lg:m-auto">
            <h3 class="bg-red-500 font-bold text-white my-5 lg:my-0 px-4 py-0.5">Recent Reviews</h3>

            <div class="lg:grid grid-cols-3 grid-row-2">
                <>{items}</>
            </div>
        </div>
    );
};

这是目前的样子：

这也是我想要的样子：

Answer 1

虽然您可以在遍历 itterations 以获取 headings 中的相应项目时考虑索引 - itterations 变量看起来完全是多余的，因为它并没有真正被使用。改为映射 headings。

const headings = ['text', 'text2', 'text3', 'text4', 'text5', 'text6'];
const items = headings.map((heading) =>
    <div class="flex flex-row lg:flex-col mx-5 lg:mx-2 lg:mt-0 my-5 pb-5 items-center md:items-start lg:bg-white border-b-2 border-red-300">
        <a href="#" class="w-[26%] lg:w-full mr-5 lg:mr-0 rounded-sm"><img src="./images/elden-ring-thumbnail.jpg" alt="Lorem Impsum"></img></a>
        <div class="md:flex md:flex-col lg:px-3">
            <h6 class="font-bold lg:my-3">{heading}</h6>
            <p class="hidden md:block my-2 lg:my-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales.</p>
        </div>
    </div>
);

Answer 2

我通过创建 json objects 数组然后映射

实现了标题和消息

import * as React from 'react';

//Maps element based on the number of itterations
const content = [{'heading': 'text1', 'text': 'text1'}, {'heading': 'text2', 'text': 'text2'}, {'heading': 'text3', 'text': 'text3'}, {'heading': 'text4', 'text': 'text4'}, {'heading': 'text5', 'text': 'text5'}, {'heading': 'text6', 'text': 'text6'},];

const items = content.map((content) =>
    <div class="flex flex-row lg:flex-col mx-5 lg:mx-2 lg:mt-0 my-5 pb-5 items-center md:items-start lg:bg-white border-b-2 border-red-300">
        <a href="#" class="w-[26%] lg:w-full mr-5 lg:mr-0 rounded-sm"><img src="./images/elden-ring-thumbnail.jpg" alt="Lorem Impsum"></img></a>
        <div class="md:flex md:flex-col lg:px-3">
            <h6 class="font-bold lg:my-3">{content.heading}</h6>
            <p class="hidden md:block my-2 lg:my-0">{content.text}</p>
        </div>
    </div>
);

export default function RecentReviews() {
    return (
        <div class="mx-1 lg:w-[60%] lg:m-auto">
            <h3 class="bg-red-500 font-bold text-white my-5 lg:my-0 px-4 py-0.5">Recent Reviews</h3>

            <div class="lg:grid grid-cols-3 grid-row-2">
                <>{items}</>
            </div>
        </div>
    );
};

映射导致所有数组元素出现在 React 中

Mapping causing all array elements to appear in React

javascript

jsx

reactjs

tailwind-css