Как установить класс для динамически визуализированной кнопки через сетку? ⇐ Javascript

[Anonymous]

Я пытаюсь внедрить адаптивную и динамическую конструкцию сетки в свой калькулятор. Я знаю простой способ достижения этого (явно создавать кнопки и добавить классы), но я пытаюсь выяснить, есть ли более краткий и «модный» способ настройки классов на кнопки (см. Ниже). < /P>
Вот что я получил: < /p>

import style from "./calculator.module.scss";

// interface CalcGridProps {
// addition: () => void;
// subtraction: () => void;
// division: () => void;
// multiplication: () => void;
// }

const CalcGrid: React.FC = (
{
// addition,
// subtraction,
// division,
// multiplication,
},
) => {
const buttons = [
["AC", "+/-", "%", "/"],
["7", "8", "9", "*"],
["4", "5", "6", "-"],
["1", "2", "3", "+"],
["0", ",", "="],
];

return (


0


{buttons.flat().map((label, i) => (

{label}

))}


);
};

export default CalcGrid;

const areaMap: Record = {
AC: "ac",
"+/-": "plusminus",
"%": "percent",
"/": "divide",

"7": "seven",
"8": "eight",
"9": "nine",
"*": "multiply",

"4": "four",
"5": "five",
"6": "six",
"-": "subtract",

"1": "one",
"2": "two",
"3": "three",
"+": "add",

funcs: "funcs",
"0": "zero",
",": "comma",
"=": "equals",
};

< /code>
С некоторой помощью от ИИ я попробовал, как он предложил. Это работает, да, но я хотел бы спросить, является ли предложенный подход жизнеспособным? И что нужно изменить для постоянного результата.

Подробнее здесь: https://stackoverflow.com/questions/797 ... n-via-grid