ReactJS 使用 map 设置 last-child 样式不起作用的解决方法

在 React 中，使用 map 函数来迭代数组并渲染列表时，可以为每个元素设置样式。如果你想为最后一个元素设置样式，可以使用 CSS 选择器 :last-child。\n\n例如，假设你有一个数组 items，你想为最后一个元素设置样式：\n\njsx\nconst items = ['Item 1', 'Item 2', 'Item 3'];\n\nconst Example = () => {\n return (\n <div>\n {items.map((item, index) => (\n <div key={index} style={index === items.length - 1 ? { color: 'red' } : {}}>\n {item}\n </div>\n ))}\n </div>\n );\n};\n\nexport default Example;\n\n\n在上面的示例中，我们通过比较当前索引 index 是否等于数组长度减 1 来判断是否为最后一个元素，并根据结果设置样式。在这种情况下，我们将文字颜色设置为红色。\n\n请确保在使用 map 函数时，为每个元素提供一个唯一的 key 属性。这有助于 React 在重新渲染时正确地识别和更新元素。