我想在反应中制作具有两个垂直对齐按钮的组件

Question

我想以增量和降低功能制作组件。增量和减少箭头按钮垂直对齐，这些按钮的右侧是计数器和重置按钮的文本。

这是我想要的组件：

Answer 1

我制作了一个与您想要的非常相似的简单代码：

这是我在 App.js 中编写的代码（您可以稍后将代码移动到独立组件中）：

import React from "react";
import "./App.css";
import { useState } from "react";

function App() {
  const [counter, setCounter] = useState(0);

  return (
    <div class="grid-container">

      <div class="grid-item" onClick={() => setCounter(counter + 1)}>
        <i class="fas fa-2x fa-angle-up"></i>
      </div>

      <div class="grid-item">{counter}</div>

      <div class="grid-item" onClick={() => setCounter(counter - 1)}>
        <i class="fas fa-2x fa-angle-down"></i>
      </div>

      <div class="grid-item" onClick={() => setCounter(0)}>
        Reset
      </div>
    </div>
  );
}

export default App;

现在这是应用程序.css内容（用于样式）：

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #50404d;

  height: 200px;
  width: 200px;
}
.grid-item {
  border: 1px solid #fff;
  color: #fff;
  padding: 30px 0;
  font-size: 20px;
  text-align: center;
}

注意：要使图标正常工作，您需要在

标记内的“public/index.html”中添加这段代码：

<script
      src="https://kit.fontawesome.com/a076d05399.js"
      crossorigin="anonymous"
    ></script>

我希望这个简单的解决方案有所帮助你知道了。