React+Tailwind动态网格布局与唯一Key错误排查求助

• 在12列网格中仅使用中间6列（左右各留3列留白），3个各占2列的元素需分别从第4、6、8列开始排列，但动态设置col-start-${variable}不生效
• 同时遇到React唯一key错误，尝试多种方案未解决

相关代码 #

Header.jsx #

import React from "react";
import contact from "../data/contact";

function Header() {
    return (
        <section>
            <h1 className="text-5xl font-medium">
                Title
            </h1>
            <div className="grid grid-cols-12">
                {contact.map((item, index) => (
                    <div key={item.key} id={item.key} className={`col-start-${index*(index+1)+4}`}>
                        <div className="flex flex-row bg-white p-3 font-bold border border-1">
                            {item.svg}
                            <h1 className="self-center pl-3">{item.title}</h1>
                        </div>
                    </div>
                ))}
            </div>
        </section>
    );
}

export default Header;

contact.js #

const contact = [
    // Phone
    {
        key: "phoneSVG",
        svg: [
            <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="black"
                className="w-8 h-8"
            >
                <path
                    fillRule="evenodd"
                    d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z"
                    clipRule="evenodd"
                />
            </svg>,
        ],
        title: "Phone",
    },

    // Mail
    {
        key: "mailSVG",
        svg: [
            <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="black"
                className="w-8 h-8"
            >
                <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
                <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
            </svg>,
        ],
        title: "Email",
    },

    // Download
    {
        key: "downloadSVG",
        svg: [
            <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="black"
                className="w-8 h-8"
            >
                <path
                    fillRule="evenodd"
                    d="M19.5 21a3 3 0 003-3V9a3 3 0 00-3-3h-5.379a.75.75 0 01-.53-.22L11.47 3.66A2.25 2.25 0 009.879 3H4.5a3 3 0 00-3 3v12a3 3 0 003 3h15zm-6.75-10.5a.75.75 0 00-1.5 0v4.19l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V10.5z"
                    clipRule="evenodd"
                />
            </svg>,
        ],
        title: "Download CV",
    },
];

export default contact;

解决方案 #

1. 修复动态列起始位置问题 #

原计算式index*(index+1)+4逻辑错误：当index为0、1、2时，计算结果分别为4、6、10，不符合需求的4、6、8。直接用4 + index*2即可得到正确的起始列，同时需添加col-span-2确保每个元素占2列：

className={`col-start-${4 + index*2} col-span-2`}

2. 解决React唯一Key错误 #

item.key本身是唯一的，错误根源在于每个item.svg是数组形式，React渲染数组元素必须指定唯一key。最简单的修复方式是去掉svg的数组包裹（因为每个item仅包含一个svg）：

修正后的完整代码 #

Header.jsx

import React from "react";
import contact from "../data/contact";

function Header() {
    return (
        <section>
            <h1 className="text-5xl font-medium">
                Title
            </h1>
            <div className="grid grid-cols-12">
                {contact.map((item, index) => (
                    <div key={item.key} id={item.key} className={`col-start-${4 + index*2} col-span-2`}>
                        <div className="flex flex-row bg-white p-3 font-bold border border-1">
                            {item.svg}
                            <h1 className="self-center pl-3">{item.title}</h1>
                        </div>
                    </div>
                ))}
            </div>
        </section>
    );
}

export default Header;

contact.js

const contact = [
    // Phone
    {
        key: "phoneSVG",
        svg: (
            <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="black"
                className="w-8 h-8"
            >
                <path
                    fillRule="evenodd"
                    d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z"
                    clipRule="evenodd"
                />
            </svg>
        ),
        title: "Phone",
    },

    // Mail
    {
        key: "mailSVG",
        svg: (
            <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="black"
                className="w-8 h-8"
            >
                <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
                <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
            </svg>
        ),
        title: "Email",
    },

    // Download
    {
        key: "downloadSVG",
        svg: (
            <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="black"
                className="w-8 h-8"
            >
                <path
                    fillRule="evenodd"
                    d="M19.5 21a3 3 0 003-3V9a3 3 0 00-3-3h-5.379a.75.75 0 01-.53-.22L11.47 3.66A2.25 2.25 0 009.879 3H4.5a3 3 0 00-3 3v12a3 3 0 003 3h15zm-6.75-10.5a.75.75 0 00-1.5 0v4.19l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V10.5z"
                    clipRule="evenodd"
                />
            </svg>
        ),
        title: "Download CV",
    },
];

export default contact;

内容的提问来源于stack exchange，提问作者jNiuk