如何在React.js中动态拆分对象属性为列，让remarks占满整行

要实现你需要的布局，不能再依赖自动遍历所有属性的两列网格，而是要手动拆分每个字段并指定布局：

import type { NextPage } from 'next';

const characters = [
  {
    name: 'Thor',
    universe: 'Marvel',
    remarks: 'hvdufdjfkjdnfkjdnfkjndkfndkjnfdkjnfkjdnfkj',
    type: 'God',
  },
  {
    name: 'Batman',
    universe: 'DC',
    remarks: 'hvdufdjfkjdnfkjdnfkjndkfndkjnfdkjnfkjdnfkj',
    type: 'Human',
  },
  {
    name: 'Iron man',
    universe: 'Marvel',
    remarks: 'hvdufdjfkjdnfkjdnfkjndkfndkjnfdkjnfkjdnfkj',
    type: 'Human',
  },
];

const Home: NextPage = () => {
  return (
    <div>
      {characters.map((character, index) => (
        <div key={index} className="mb-6">
          {!!index && (
            <hr
              className="w-full my-4"
              style={{ border: '1px solid #BEC3C8' }}
            />
          )}
          {/* 第一行：name和universe分两列 */}
          <div className="grid grid-cols-2 gap-x-30 gap-y-6">
            <div className="flex flex-col">
              <div className="font-bold">name</div>
              <div className="whitespace-pre-wrap break-words">{character.name}</div>
            </div>
            <div className="flex flex-col">
              <div className="font-bold">universe</div>
              <div className="whitespace-pre-wrap break-words">{character.universe}</div>
            </div>
          </div>
          {/* 第二行：remarks占满整行 */}
          <div className="flex flex-col my-6">
            <div className="font-bold">remarks</div>
            <div className="whitespace-pre-wrap break-words">{character.remarks}</div>
          </div>
          {/* 第三行：type单独一行 */}
          <div className="flex flex-col">
            <div className="font-bold">type</div>
            <div className="whitespace-pre-wrap break-words">{character.type}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default Home;

关键改动说明： #

• 移除Object.entries自动遍历逻辑，改为手动渲染每个字段，完全控制元素布局位置
• 第一行保留grid-cols-2布局，仅放置name和universe两个字段
• remarks作为独立块级元素自然占满整行，用my-6控制上下间距
• type单独一行渲染，保持与其他字段一致的样式结构
• 给角色容器添加key={index}（生产环境建议用唯一标识如character.name）和mb-6优化角色间间距

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