在前端开发中，React 是一个非常流行的 JaScript 框架，广泛用于构建用户界面。今天我们将通过一个实战项目，展示如何用 React 构建一个简单的计算器，这不仅可以帮助你巩固对 React 的基础知识，还能让你对实际开发有更深的理解。
一、项目搭建
你需要确保本地环境已经安装了 Node.js 和 npm 或者 yarn。我们可以通过 Create React App 快速初始化一个 React 项目：
npx create-react-app react-calculator
cd react-calculator
npm start
一旦项目启动成功，你应该可以在浏览器中看到 React 的默认页面。我们就开始实现计算器功能。
二、组件结构设计
在 React 中，界面通常是由多个组件组合而成的。为了让代码更加清晰，我们可以将计算器拆分为几个主要组件：显示屏组件（Display）、按钮组件（Button）和整个计算器的容器组件（Calculator）。
Display 组件：用于显示输入和计算结果。
Button 组件：负责渲染每一个按钮，用户通过点击这些按钮来输入操作符和数字。
Calculator 组件：负责管理整个计算器的逻辑，包括状态管理和事件处理。
三、编写 Display 和 Button 组件
我们来实现 Display 组件，它将接收当前输入值或计算结果作为 props，并显示出来：
function Display({ value }) {
return (
<div className="display">
{value}
</div>
);
}
接下来是 Button 组件，它同样接收 props，包括按钮的显示内容以及点击时触发的事件：
function Button({ label, onClick }) {
return (
<button onClick={() => onClick(label)}>
{label}
</button>
);
}
四、实现 Calculator 组件
Calculator 组件是计算器的核心部分，负责处理用户的输入并进行计算。我们需要在该组件中定义一个 state 来管理当前的输入值和计算结果。为此，我们可以使用 React 的 useState 钩子。
import React, { useState } from 'react';
import Display from './Display';
import Button from './Button';
function Calculator() {
const [input, setInput] = useState('');
const handleButtonClick = (value) => {
if (value === '=') {
try {
setInput(eval(input)); // eval 用于计算表达式，但需要注意安全性
} catch {
setInput('Error');
}
} else if (value === 'C') {
setInput('');
} else {
setInput(input + value);
}
};
const buttons = ['7', '8', '9', '/', '4', '5', '6', '*', '1', '2', '3', '-', '0', '.', '=', '+', 'C'];
return (
<div className="calculator">
<Display value={input} />
<div className="buttons">
{buttons.map((label) => (
<Button key={label} label={label} onClick={handleButtonClick} />
))}
</div>
</div>
);
}
export default Calculator;
五、样式和优化
目前，我们的计算器已经能够基本实现加减乘除和清零的功能。可以根据需求对界面进行一些美化处理，使用 CSS 让按钮和显示屏更加美观整齐。在项目的实际开发中，使用 eval 处理计算逻辑是较为简便的方法，但存在一定的安全风险，建议在生产环境中使用更安全的数学表达式解析库，比如 math.js。
六、总结
通过这个简单的项目演练，我们用 React 实现了一个基础的计算器应用，主要包括组件的拆分与组合、状态管理以及事件处理。这是 React 开发中的基础操作，虽然项目不复杂，但涉及的知识点涵盖了前端开发的核心。如果你能掌握这个实战项目，相信对日后的前端开发将大有裨益。
文章转载自：https://www.96tuji.cn/625.html