将地图数据反应到顺风网格

Question

我想使用 tailwind css

将拥有属性 eligible: true 的用户渲染到网格

  const users = [
    {
      name: 'John',
      age: 23,
      pic: 'someUrl'
      eligible: true
    },
    {
      name: 'Marie',
      age: 6,
      pic: 'someUrl'
      eligible: false
    },
    {
      name: 'David',
      age: 30,
      pic: 'someUrl'
      eligible: true
    },
    {
      name: 'Sarah',
      age: 20,
      pic: 'someUrl'
      eligible: true
    }
  ]

     <ul className="grid grid-rows-3 grid-flow-col gap-4 mt-4 px-10">
        {users.map((user) =>
          user.eligible ? (
            <>
              <li className="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg row-span-3 col-span-1">
                {user.name}
              <img src={user.pic} />
              </li>
              <li className="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg row-span-2">
                {user.name}
              <img src={user.pic} />
              </li>
              <li className="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg">
                {user.name}
              <img src={user.pic} />
              </li>
            </>
          ) : (
            ''
          )
        )}
      </ul>

使用上面的代码，为单个用户创建了三个网格，总共创建了 9 个网格，而不是 3 个。我无法四处寻找解决方案。如果有人能给我提示，我将不胜感激。我正在尝试实现完全像这样的网格 The grid in my mind

Answer 1

我不确定是否有更好的方法，但这是我的尝试：

APP.js

import React from "react";
import TestS from "./components/TestS";
function App() {
  return (
    <div className="relative w-full  ">
      <TestS />
    </div>
  );
}

export default App;

TestS.jsx

Read the comments if there is something not clear

import React, { useState } from "react";

function TestS() {
  // this variable will be used inside (map) later to decide which style will be rendered
  let [count] = useState(0);
  const users = [
    {
      name: "John",
      age: 23,
      pic: "https://picsum.photos/200",
      eligible: true
    },
    {
      name: "Marie",
      age: 6,
      pic: "https://picsum.photos/200",
      eligible: false
    },
    {
      name: "David",
      age: 30,
      pic: "https://picsum.photos/200",
      eligible: true
    },
    {
      name: "Sarah",
      age: 20,
      pic: "https://picsum.photos/200",
      eligible: true
    }
  ];

  return (
    <div className="  ">
      <ul className="grid grid-rows-3 grid-flow-col gap-4 mt-4 px-10">
        {users.map((user, id) => {
          // eslint-disable-next-line
          if (user.eligible) {
            // Once there is an object passed the (if) statment the count will increase by 1 first
            count = count + 1;
            return (
              // Now it's clear that the returned element with the desired values
              // will be rendered with the classes that you specify
              count === 1 ? (
                <li
                  key={id}
                  className="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg row-span-3 col-span-1"
                >
                  {user.name}
                  <img
                    alt="person pic"
                    src={user.pic}
                    className="w-24 h-24 object-fill"
                  />
                </li>
              ) : count === 2 ? (
                <li
                  key={id}
                  className="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg"
                >
                  {user.name}
                  <img
                    alt="person pic"
                    src={user.pic}
                    className="w-24 h-24 object-fill"
                  />
                </li>
              ) : count === 3 ? (
                <li
                  key={id}
                  className="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg row-span-2"
                >
                  {user.name}
                  <img
                    alt="person pic"
                    src={user.pic}
                    className="w-24 h-24 object-fill"
                  />
                </li>
              ) : (
                <h1>somthing wentt wrong</h1>
              )
            );
          }
          // eslint-disable-next-line
        })}
      </ul>
    </div>
  );
}

export default TestS;

在 codesandbox

上查看 LIVE

将地图数据反应到顺风网格

React map data to tailwind grid

reactjs

css-grid

tailwind-css