渲染后动态定位元素反应js

Question

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

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;

我还有一个 HomePage 组件，在这个 HomePage 组件中我正在渲染 Room 组件：

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;

这是 Room 组件：

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>

渲染后动态定位元素反应js

position element dynamically after a render react js

styles

reactjs