React项目中如何为map渲染的组件添加Key prop？

你现在直接调用组件函数的写法没法传递key属性——key是React识别列表元素的特殊属性，必须在创建React元素时指定。下面是两种可行的修改方式：

方法一：使用JSX语法（推荐） #

把函数调用改成JSX形式，就能正常添加key了：

import React, { Suspense, useEffect, useMemo, useRef, useState } from "react";
import "./PartOne.css";

const PartOne = () => {
const [rooms, setRooms] = useState([
    Room1,
    Room2,
    Room3,
    Room4,
    Room5,
    Room6,
    Room7,
    Room8
]);

useEffect(() => {
    console.log("rooms state:", rooms);
}, [rooms]);

return (
    <div className="wrapper">
        {rooms.map((RoomComponent, roomIndex) => (
            <RoomComponent 
                key={roomIndex} 
                position={positions[roomIndex]} 
            />
        ))}
    </div>
);
};
export default PartOne;

这里把变量名改成RoomComponent（首字母大写符合React组件命名规范），用<RoomComponent />的JSX语法，就能直接在标签上添加key属性。

方法二：使用React.createElement #

如果要保留函数调用的形式，可以用React.createElement创建元素，第二个参数就是key：

import React, { Suspense, useEffect, useMemo, useRef, useState } from "react";
import "./PartOne.css";

const PartOne = () => {
const [rooms, setRooms] = useState([
    Room1,
    Room2,
    Room3,
    Room4,
    Room5,
    Room6,
    Room7,
    Room8
]);

useEffect(() => {
    console.log("rooms state:", rooms);
}, [rooms]);

return (
    <div className="wrapper">
        {rooms.map((room, roomIndex) =>
            React.createElement(room, { 
                key: roomIndex, 
                position: positions[roomIndex] 
            })
        )}
    </div>
);
};
export default PartOne;

额外提醒：如果后续rooms数组会有增删、排序操作，建议用组件的唯一标识（比如组件名称）当key，不要用索引，避免React渲染异常。

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