在render react js之后动态定位元素

Question

所以我在reactjs中有一个应用程序，我只想动态定位元素。该应用程序用于添加房间
这是应用程序组件(不确定您是否需要此部分(：

import React, { useState } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import HomePage from "./HomePage";
import Header from "./Header";
import AddRoom from "./AddRoom";
import Footer from "./Footer";
import Room from "./Room";
function App() {
const [rooms, setRooms] = useState([]);
function updateRooms(room) {
setRooms((prevRooms) => {
return [...prevRooms, room];
});
}
return (
<div className="App">
<Router>
<Header />
<Route
exact
path="/"
component={() => {
return <HomePage rooms={rooms} />;
}}
/>
<Route
exect
path="/AddRoom"
component={() => {
return <AddRoom addRoom={updateRooms} />;
}}
/>
<Footer />
</Router>
</div>
);
}
export default App;

我还有一个主页组件，在这个主页组件中，我正在渲染房间组件：

import React from "react";
import AddCircleIcon from "@material-ui/icons/AddCircle";
import { Link } from "react-router-dom";
import Room from "./Room";
function HomePage(props) {
return (
<div className="center top-padding">
<h1>Hey There!</h1>
<p>Start adding rooms</p>
<Link to="/AddRoom">
<button className="btn-icon">
<AddCircleIcon style={{ color: "white" }} />
</button>
</Link>
<div className="container">
<div className="row">
{props.rooms.map((room, index) => {
return (
<Room
key={index}
id={index}
name={room.name}
type={room.type}
color={room.color}
/>
);
})}
</div>
</div>
</div>
);
}
export default HomePage;

这是房间组件：

import React, { useState } from "react";
function Room(props) {
var unit = 1;
var pixel = 100;
var column = 1;
const [mesures, setMesures] = useState({
unit: 1,
pixel: 100,
column: 1
});
function posStyle() {
debugger;
if (column == 12) {
setMesures((prevMesures) => {
return {
...prevMesures,
unit: 1,
pixel: 100,
column: 1
};
});
return <br />;
} else return null;
}
function increase() {
debugger;
setMesures((prevMesures) => {
return {
...prevMesures,
unit: [unit++],
pixel: [unit * 100],
column: [column++]
};
});
}
return (
<div
className={"room-border col-" + column}
style={{ backgroundColor: props.color, marginLeft: pixel + "px" }}
>
{props.type}
{props.name}
{posStyle}
{increase}
</div>
);
}
export default Room;

所以我的问题是关于在主页组件中呈现的Room组件。我希望主页中的哪个元素(房间(显示在一行12个房间中然后在线路12之后到达一个新线路的断点

就像这样：https://prnt.sc/13dyytk

但相反，它被显示为一个元素，因为度量状态没有改变。现在我明白了为什么它没有改变，因为页面总是在重新呈现有没有其他解决方案可以显示这些元素？

如果你需要css：

.App {
font-family: sans-serif;
}
.top-padding {
padding-top: 100px;
}
body {
background-image: url("backGround.jpg");
color: white;
}
.logo {
font-size: 30px;
padding-bottom: 50px;
}
.btn-icon {
padding: 0;
border: none;
outline: none;
background: none;
}
.center {
text-align: center;
}
footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
height: 2.5rem;
}
.error {
color: red;
margin-top: 5px;
}
.room-border {
border: solid;
width: 75px;
height: 35px;
margin-top: 10px;
position: absolute;
}
.room-container {
text-align: center;
}

Answer 1

使用CSS网格。你可以做一些类似的事情

将此添加到您的CSS

.container {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 1rem;
}

对于您的房间组件

<div className="container">
{props.rooms.map((room, index) => {
return (
<Room
key={index}
id={index}
name={room.name}
type={room.type}
color={room.color}
/>
);
})}
</div>