React 遍历固定div块标题位置，保持标题样式不变

你可以使用 CSS 的 'position: fixed' 属性来固定每个 div 块的标题位置，而不改变标题样式。在 React 中，你可以在生成 div 块的循环中，为每个 div 块的标题元素添加一个 className，然后在 CSS 中使用该 className 来设置固定位置。

首先，在 React 组件中生成 5 个 div 块和相应的标题元素：

import React from 'react';

const DivBlocks = () => {
  const divData = [
    { id: 1, title: 'Title 1', content: 'Content 1' },
    { id: 2, title: 'Title 2', content: 'Content 2' },
    { id: 3, title: 'Title 3', content: 'Content 3' },
    { id: 4, title: 'Title 4', content: 'Content 4' },
    { id: 5, title: 'Title 5', content: 'Content 5' },
  ];

  return (
    <div>
      {divData.map((item) => (
        <div className='div-block' key={item.id}>
          <h2 className='title'>{item.title}</h2>
          <p>{item.content}</p>
        </div>
      ))}
    </div>
  );
};

export default DivBlocks;

然后，在 CSS 中使用 'position: fixed' 和适当的样式来固定标题位置，同时保持标题样式不变：

.div-block {
  position: relative;
  margin-bottom: 20px;
}

.title {
  position: fixed;
  top: 0;
  left: 0;
  /* 其他标题样式 */
}

这样，每个 div 块的标题都会固定在页面的左上角，而不会改变标题的样式。你可以根据需要调整 'top' 和 'left' 属性来改变标题的固定位置。