react遍历生成的5个div块固定每个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属性来改变标题的固定位置