javascript - ReactJs 中 JSON 的 GridView 格式

Question

我有一个 React 组件，需要在其中渲染从第 3 方 API 获取的 JSON。JSON 的类型为

[
    {
        color: "red",
        value: "#f00"
    },
    {
        color: "green",
        value: "#0f0"
    },
    {
        color: "blue",
        value: "#00f"
    },
    {
        color: "cyan",
        value: "#0ff"
    },
    {
        color: "magenta",
        value: "#f0f"
    },
    {
        color: "yellow",
        value: "#ff0"
    },
    {
        color: "black",
        value: "#000"
    }
]

我需要渲染在 3 列的表中获取的 JSON。

Red     Green     Blue
Cyan    Magenta   Yellow
Black

我能够以单列样式呈现，但在处理多列时遇到问题。

有什么办法可以做到吗？

Answer 1

您应该像下面这样更新组件样式。

const data = [
  {
    color: "red",
    value: "#f00"
  },
  {
    color: "green",
    value: "#0f0"
  },
  {
    color: "blue",
    value: "#00f"
  },
  {
    color: "cyan",
    value: "#0ff"
  },
  {
    color: "magenta",
    value: "#f0f"
  },
  {
    color: "yellow",
    value: "#ff0"
  },
  {
    color: "black",
    value: "#000"
  }
];

class Hello extends React.Component {
  render() {
    return (
      <div style={{ display: "flex", flexWrap: "wrap" }}>
        {data.map(item => (
          <div style={{ flex: 1, flexBasis: "33%" }}>{item.color}</div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<Hello />, document.getElementById("container"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="container"></div>