ReactJs 行和列

若要在具有固定列数和行数的网格中显示数据，可以使用CSS网格布局.以下是如何使用CSS创建包含4列和2行的网格的示例:

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

然后，您可以在容器元素上使用此CSS类，该容器元素包含要在网格中显示的数据.例如，如果您有一个要在网格中显示的数据数组，则可以使用MAP函数从该数据创建元素网格:

const data = [
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
  { id: 3, name: "Item 3" },
  { id: 4, name: "Item 4" },
  { id: 5, name: "Item 5" },
  { id: 6, name: "Item 6" },
];

function App() {
  return (
    <div className="grid">
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

这将创建一个4列2行的网格，数据数组中的每一项都将显示在其中一个网格单元格中.

若要添加导航以显示更多数据，可以使用分页.这涉及到将数据拆分成更小的块，并且一次只显示一个块.然后，您可以添加允许用户在不同数据块之间导航的按钮或链接.

下面是一个如何在React应用程序中实现分页的示例:

function App() {
  const [currentPage, setCurrentPage] = useState(1); // Keep track of the current page
  const itemsPerPage = 4; // The number of items to display per page

  // Use the currentPage and itemsPerPage to get the slice of data to display
  const currentItems = data.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

  return (
    <div>
      {/* Display the grid of items for the current page */}
      <div className="grid">
        {currentItems.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>

      {/* Add buttons to navigate between pages */}
      <div>
        {currentPage > 1 && (
          <button onClick={() => setCurrentPage(currentPage - 1)}>
            Previous
          </button>
        )}
        {currentPage < data.length / itemsPerPage && (
          <button onClick={() => setCurrentPage(currentPage + 1)}>
            Next
          </button>
        )}
      </div>
    </div>
  );
}

在本例中，CurrentPage状态变量用于跟踪当前页面，而setCurrentPage函数用于在用户单击"上一页"时更新当前页面.