将地图数据与顺风栅格反应

Question

我希望使用顺风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个网格。如果有人能给我个提示，我会很感激的。我正试图实现一个与这个我脑海中的网格完全相同的网格

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

如果有什么不清楚的地方，请阅读评论。

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;

查看代码框上的活着