map 中的“Key”道具

Question

新手在这里，很抱歉这个愚蠢的问题:)

如何将“钥匙”道具放入这个 function 中？

代码在ContactShadows上面。 我尝试了很多方法，但我尝试的所有方法都无法正常工作。 你能检查一下并告诉我如何放置“钥匙”道具吗？

    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) =>
            room({ position: positions[roomIndex] })
        )}
    </div>
);
};
export default PartOne;

谢谢你

Answer 1

您可以将room function 中的元素包装在<React.Fragment>中并为其分配key ：

return (
    <div className="wrapper">
        {rooms.map((room, roomIndex) => (
            <React.Fragment key={`${roomIndex}`}>
                {room({ position: positions[roomIndex] })}
            </React.Fragment>
        ))}
    </div>
);