有没有办法在 React 的组件内动态生成的 div 上实现样式

Question

在 React 中，我有一个名为 DivHelper 的组件，它在另一个下面生成 2 个 div - 相反，我想将它们并排放置，但我看不到 Divhelper 的代码生成div。有没有办法访问动态生成的 div？

例如-

///一些随机代码

///更多代码

这就变成了

///一些随机代码

<div>1 Div</div>

<div>2 Div</div>

///更多代码

因此，输出是

1 Div

2 Div

相反，我希望它并排放置（如浮动） 2 Div 1 Div

这可能吗？

Answer 1

您可以在 React 中动态更改组件的类名。使用您的 CSS，您可以根据需要设置组件和布局的样式。

例如：

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [display, setDisplay] = useState("row");

  const handleClick = () => {
    display === "row" ? setDisplay("column") : setDisplay("row");
  };

  return (
    <div className="App">
      <h1>Dynamic display</h1>
      <button onClick={() => handleClick()}>Change display</button>
      <div className={"container " + display}>
        <div className="square red">First div</div>
        <div className="square green">Second div</div>
      </div>
    </div>
  );
}

你的 CSS 文件：

.container {
  display: flex;
}
.row {
  flex-direction: row;
}

.column {
  flex-direction: column;
}
.square {
  background: "red";
  height: 100px;
  width: 100px;
}

.red {
  background: #f00;
}
.green {
  background: #0f0;
}

有没有办法在 React 的组件内动态生成的 div 上实现样式

Is there a way to implement styles on dynamically generated div inside a component in React

javascript

css

jsx

flexbox

reactjs