CSS 网格不会放置使用 React 和 array.map 创建的项目

Question

我正在做一个 React 挑战来创建一个计算器。我使用 React 功能组件渲染按钮，并计划使用 CSS 网格将它们放置在正确的位置。

我直接渲染了一些按钮：

const Equals = () => {
  return (
    <button id="equals" type="button" className="btn btn-success"> = </button>
  )
};

我可以使用 grid-area 轻松地将它们放置在 CSS 网格布局中的任意位置。

但我无法放置使用array.map 创建的任何按钮，如下所示：

return (
  <div id='num-pad' className="btn-group" role="group">
    {
      numbers.map(ele => 
        <button id={ele.letter} key={ele.letter} className="btn btn-secondary"> 
          {ele.number} 
        </button>
      )
    }
  </div>
)

为什么会这样？

这是我的笔的链接： https://codepen.io/simone-saimon-rossi/pen/LYbQWyr

Answer 1

当您执行display: grid 时，这只影响该元素的直接子元素。您正在用另一个<div> 包裹所有按钮，这意味着#calculator 的唯一直接子级是#equals、#clear、#num-pad 和#ops-pad。您需要做的是摆脱这些包装 div 并将它们全部设为 #calculator 的直接子代。

即改变这个：

return (
  <div id='num-pad' className="btn-group" role="group">
    {
      numbers.map(ele => 
        <button id={ele.letter} key={ele.letter} className="btn btn-secondary"> 
          {ele.number} 
        </button>
      )
    }
  </div>
)

到这里：

return (
  <>
    {
      numbers.map(ele => 
        <button id={ele.letter} key={ele.letter} className="btn btn-secondary"> 
          {ele.number} 
        </button>
      )
    }
  </>
)

（其他的也一样）

Answer 2

首先，您需要做的是渲染您的按钮，使它们都是彼此的兄弟。然后你可以为每个按钮添加类名来控制它们的位置。

这是一个工作示例hosted at CodeSandbox。

注意：可重用组件不应有与其关联的 ID。您应该在使用它们时添加这些 ID，而不是在定义它们时。我将你所有的 ID 转换为类。

第一步

让按钮并排呈现。用fragment标签(<></>)为每个按钮数组转换包装<div>标签。

const Equals = () => {
  return (
    <button className="equals" type="button" className="btn btn-success">=</button>
  );
};

const Clear = () => {
  return (
    <button className="clear" type="button" className="btn btn-danger">C</button>
  );
};

const Operations = () => {
  const operations = [
    { symbol: "+", letter: "add" },
    { symbol: "-", letter: "subtract" },
    { symbol: "x", letter: "multiply" },
    { symbol: "/", letter: "divide" }
  ];

  return (
    <>
      {operations.map((ele) => (
        <button id={ele.letter} key={ele.letter} className="btn btn-warning">
          {ele.symbol}
        </button>
      ))}
    </>
  );
};

const Numbers = () => {
  const numbers = [
    { number: "0", letter: "zero" },
    { number: "1", letter: "one" },
    { number: "2", letter: "two" },
    { number: "3", letter: "three" },
    { number: "4", letter: "four" },
    { number: "5", letter: "five" },
    { number: "6", letter: "six" },
    { number: "7", letter: "seven" },
    { number: "8", letter: "eight" },
    { number: "9", letter: "nine" },
    { number: ".", letter: "decimal" }
  ];

  return (
    <>
      {numbers.map((ele) => (
        <button id={ele.letter} key={ele.letter} className="btn btn-secondary">
          {ele.number}
        </button>
      ))}
    </>
  );
};

const Display = () => {
  return <div className="display">C</div>;
};

const Calculator = () => {
  return (
    <div className="calculator">
      <Display />
      <div class="buttons">
        <Equals />
        <Clear />
        <Numbers />
        <Operations />
      </div>
    </div>
  );
}

ReactDOM.render(<Calculator />, document.getElementById("root"));

.calculator {
  border: 1px solid black;
  width: 400px;
  height: 600px;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
}

.display {
  background-color: #d99e36;
  color: #080202;
  font-family: "IBM Plex Mono", monospace;
  height: 2em;
  font-size: 2em;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25em;
  padding: 0.25em;
  flex: 1;
}

第二步

在您想要的位置渲染按钮。如果您有任何问题，请参考：MDN / CSS / Grid Layout。

const Equals = () => {
  return <button className="btn btn-success letter-equals">=</button>;
};

const Clear = () => {
  return <button className="btn btn-danger letter-clear">C</button>;
};

const Operations = () => {
  const operations = [
    { symbol: "+", letter: "add" },
    { symbol: "-", letter: "subtract" },
    { symbol: "×", letter: "multiply" },
    { symbol: "÷", letter: "divide" }
  ];

  return (
    <>
      {operations.map(({ letter, symbol }) => (
        <button key={letter} className={`btn btn-warning letter-${letter}`}>
          {symbol}
        </button>
      ))}
    </>
  );
};

const Numbers = () => {
  const numbers = [
    { number: "0", letter: "zero" },
    { number: "1", letter: "one" },
    { number: "2", letter: "two" },
    { number: "3", letter: "three" },
    { number: "4", letter: "four" },
    { number: "5", letter: "five" },
    { number: "6", letter: "six" },
    { number: "7", letter: "seven" },
    { number: "8", letter: "eight" },
    { number: "9", letter: "nine" },
    { number: ".", letter: "decimal" }
  ];

  return (
    <>
      {numbers.map(({ letter, number }) => (
        <button key={letter} className={`btn btn-secondary letter-${letter}`}>
          {number}
        </button>
      ))}
    </>
  );
};

const Display = () => {
  return <div className="display">HELLO WORLD</div>;
};

const Calculator = () => {
  return (
    <div className="calculator">
      <Display />
      <div class="buttons">
        <Equals />
        <Clear />
        <Numbers />
        <Operations />
      </div>
    </div>
  );
};

ReactDOM.render(<Calculator />, document.getElementById("root"));

.calculator {
  border: 1px solid black;
  width: 400px;
  height: 600px;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
}

.display {
  background-color: #d99e36;
  color: #080202;
  font-family: "IBM Plex Mono", monospace;
  height: 2em;
  font-size: 2em;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25em;
  padding: 0.25em;
  flex: 1;
}

.letter-clear {
  grid-column: 1 / 3;
  grid-row: 1;
}

.letter-divide {
  grid-column: 3;
  grid-row: 1;
}

.letter-multiply {
  grid-column: 4;
  grid-row: 1;
}

.letter-add {
  grid-column: 4;
  grid-row: 3;
}

.letter-subtract {
  grid-column: 4;
  grid-row: 2;
}

.letter-zero {
  grid-column: 1 / 3;
  grid-row: 5;
}

.letter-one {
  grid-column: 1;
  grid-row: 4;
}

.letter-two {
  grid-column: 2;
  grid-row: 4;
}

.letter-three {
  grid-column: 3;
  grid-row: 4;
}

.letter-four {
  grid-column: 1;
  grid-row: 3;
}

.letter-five {
  grid-column: 2;
  grid-row: 3;
}

.letter-six {
  grid-column: 3;
  grid-row: 3;
}

.letter-seven {
  grid-column: 1;
  grid-row: 2;
}

.letter-eight {
  grid-column: 2;
  grid-row: 2;
}

.letter-nine {
  grid-column: 3;
  grid-row: 2;
}

.letter-decimal {
  grid-column: 3;
  grid-row: 5;
}

.letter-equals {
  grid-column: 4;
  grid-row: 4 / 6;
}