Я пытаюсь внедрить адаптивную и динамическую конструкцию сетки в свой калькулятор. Я знаю простой способ достижения этого (явно создавать кнопки и добавить классы), но я пытаюсь выяснить, есть ли более краткий и «модный» способ настройки классов на кнопки (см. Ниже). < /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
