在两列中映射 div 元素

Question

我正在尝试将任意数量的 div 放入 2 列中，如果 div/元素是奇数，那么最后一个会在两列的中心进行调整，如下所示..

但目前我将每个 div 放在一行中。

-

这是我的代码。

import "./styles.css";
import Typography from "@material-ui/core/Typography";

export default function App() {
const sampleDetails = {
sampleObservations: [
  {
    observationsId: 7,
    selected: true,
    value: "12:53",
    parentId: 2,
    name: "Time"
  },
  {
    observationsId: 4,
    selected: true,
    value: "11.4",
    parentId: 2,
    name: "Ph"
  },
  {
    observationsId: 8,
    selected: true,
    value: "12-03-21 2:06",
    parentId: 3,
    name: "Flow Date"
  },
  {
    observationsId: 9,
    selected: true,
    value: "120",
    parentId: 3,
    name: "Frequency"
  },
  {
    observationsId: 10,
    selected: true,
    value: "20",
    parentId: 3,
    name: "Sample Count"
  }
]
};

return (
<div className="App">
  <h1>Hello CodeSandbox</h1>
  <div
    style={{
      display: "flex",
      flexDirection: "row",
      justifyContent: "space-around",
      marginBottom: "30px"
    }}
  >
    <div>
      {sampleDetails.sampleObservations.map(function (item, i) {
        return (
          <div
            key={i}
            style={{
              flexDirection: "row",
              display: "flex",
              justifyContent: "space-around",
              alignItems: "left"
            }}
          >
            <h4 variant="subtitle1" style={{ marginRight: "5px" }}>
              {item.name}:
            </h4>
            <Typography>{item.value}</Typography>
          </div>
        );
      })}
    </div>
  </div>
  </div>
  );
}

可以在代码沙箱中找到运行示例：https://codesandbox.io/s/stoic-cherry-trc7n?file=/src/App.js

Answer 1

您尝试过网格吗，尝试将其添加到类名为“tradeWaterGrabSample”的 div 中

style={{ display: "grid", gridTemplateColumns: "auto auto" }}

<div className="App">
      <h1>Hello CodeSandbox</h1>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "auto auto",
          flexDirection: "row",
          justifyContent: "space-around",
          marginBottom: "30px"
        }}
      >
        <div style={{ display: "grid", gridTemplateColumns: "auto auto" }}>
          {sampleDetails.sampleObservations.map(function (item, i) {
            return (
              <div
                key={i}
                style={{
                  flexDirection: "row",
                  display: "flex",
                  justifyContent: "space-around",
                  alignItems: "left"
                }}
              >
                <h4 variant="subtitle1" style={{ marginRight: "5px" }}>
                  {item.name}:
                </h4>
                <Typography>{item.value}</Typography>
              </div>
            );
          })}
        </div>
      </div>
    </div>

如果这是您想要的（我不确定我是否理解您的目标），您可以将此样式添加到您的类名中，而不是添加内联样式

Answer 2

在父元素 (tradeWaterGrabSample) 上而不是子元素上放置显示 flex 和 flex 方向。还为您map() 的每个孩子添加key= 属性以使反应快乐。

{sampleDetails.sampleObservations.map(function (item, i) {
  return (
    <div
      key={i}     <---- add key= attribute
      style={{

更新

我调整了您的代码沙箱以使其正常工作。这使用网格。你有一个 div1 -> div2 -> item, item, item。你的造型在 div1 上。我将它移到 div2（项目的父项），并删除了弹性框样式。您可以使用display: "inline-grid" 收紧表格。我在每个项目周围添加了一个边距，并删除了项目标题上的右边距。 编辑：......现在我明白你想要做什么了。表格的 2 列网格，每个项目中的标题和数据都有弹性框。我更新了代码沙箱以恢复 flex 样式（稍作调整）。如果我最初的回复让您误入歧途，我们深表歉意。

Here's the sandbox link.

return (
  <div className="App">
    <h1>Hello CodeSandbox</h1>
    <div>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "auto auto",
          marginBottom: "30px",
          backgroundColor: "lightgoldenrodyellow"
        }}
      >
        {sampleDetails.sampleObservations.map(function (item, i) {
          return (
            <div
              key={i}
              style={{
                backgroundColor: "lightblue",
                margin: "4px"
              }}
            >
              <h4 variant="subtitle1">{item.name}:</h4>
              <Typography>{item.value}</Typography>
            </div>
          );
        })}
      </div>
      <div>something else</div>
    </div>
  </div>
);