React 项目：计算器

最新推荐文章于 2024-06-05 22:55:48 发布

郁蒸十四

最新推荐文章于 2024-06-05 22:55:48 发布

阅读量491

点赞数 2

分类专栏： react 文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/qq_35273097/article/details/127279087

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本教程专注于 React 部分，故对 css 及 js 不做过多解释

项目地址：yuzheng14/calculator (github.com)

分析原型

组件结构

应用中一共包含 4 个组件

APP：整个应用的整体
Display：展示输入数据及计算结果
ButtonPanel：按键区
Button：每一个按键

创建静态版本

使用 create-react-app 创建一个空项目

npx create-react-app <name> && cd <name>

删除 src 和 public 目录下的所有文件

初始项目结构

rm -f src/* public/*

按照目录结构创建所需文件

js文件项目结构

创建首页模板

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Calculator" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>React Calculator</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <a class="github-fork-ribbon left-top" href="https://github.com/yuzheng14" data-ribbon="See me on Github" title="See me on Github">
    See me on Github
  </a>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>

</html>

开始自底向上构建组件，首先是 Button 组件：

import PropTypes from 'prop-types';

export default function Button(props) {
    const className = `component-button ${props.orange ? 'orange' : ''
        } ${props.wide ? 'wide' : ''
        }`;

    return (
        <div className={className}>
            <button>{props.name}</button>
        </div>
    )

}

Button.propTypes = {
    name: PropTypes.string,
    orange: PropTypes.bool,
    wide: PropTypes.bool,
}

该组件获取从父组件中获取 wide 和 orange 属性用于指定样式

ButtonPanel 组件：

import Button from "./Button";

export default function ButtonPanel(props) {
    return(
        <div className="component-button-panel">
            <div>
                <Button name="AC" />
                <Button name="+/-" />
                <Button name="%"/>
                <Button name="÷"  orange/>
            </div>
            <div>
                <Button name="7" />
                <Button name="8" />
                <Button name="9"/>
                <Button name="×"  orange/>
            </div>
            <div>
                <Button name="4" />
                <Button name="5" />
                <Button name="6"/>
                <Button name="-"  orange/>
            </div>
            <div>
                <Button name="1" />
                <Button name="2" />
                <Button name="3"/>
                <Button name="+"  orange/>
            </div>
            <div>
                <Button name="0"  wide/>
                <Button name="." />
                <Button name="="  orange/>
            </div>
        </div>
    )
}

该组件组合所有按键，通过 orange 和 wide 属性制定按键样式

Display 组件：

import PropTyes from 'prop-types';

export default function Display(props){
    return(
        <div className="component-display">
            <div>{props.value}</div>
        </div>
    )
}

Display.propTypes={
    value:PropTyes.string,
}

该组件接收要显示的值并渲染

App 组件：

import Display from "./Display";
import ButtonPanel from "./ButtonPanel";

export default function App() {
    return (
        <div className="component-app">
            <Display value={} />
            <ButtonPanel />
        </div>
    )
}

该组件组合 Display 和 ButtonPanel 组件

index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './component/App';
import 'github-fork-ribbon-css/gh-fork-ribbon.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

该文件用于将 App 组件渲染到网页，对应仓库中 v0.1.0 的 tag，写好后页面是这样

在这里插入图片描述

从仓库中导入样式，目录为

src/index.css
src/styles/*

并将各个 css 文件引入对应的 js 文件中，写好后页面变成

在这里插入图片描述

静态页面代码完成，对应仓库中 v0.1.1 的 tag，接下来该开始思考交互部分了

确定 UI state 的最小（且完整）表示及放置位置

为了正确构建应用，我们应该找出应用所需的 state，以及放置的位置。本应用中需要组件中传递变量的过程为按下按键后，更新状态，传递给显示组件，取最小公共父组件，则为 App 组件。根据算式最少需要两个运算数和一个运算符，可知最少需要三个状态。修改 App 组件为类组件以保存状态，将状态添加到 App 组件中。

...
export default class App extends Component{
    constructor(props){
        super(props);
        // total 用于存放第一个运算数及计算结果
        // next 用于存放第二个运算数
        // operation 用于存放运算符
        this.state={
            total:null,
            next:null,
            operation:null,
        };
    }

	render(){
	...
    		   // 将状态计算得到要显示的数字传入组件中
                <Display value={this.state.next||this.state.total||"0"}/>
     ...
}

添加反向数据流

到目前为止，我们已经借助自上而下传递的 props 和 state 渲染了一个应用。现在，我们将尝试让数据反向传递：Button 组件–> App 组件。

我们要实现的功能是：当用户按下按键时，我们需要改变 state 来反映用户的当前输入，并传入显示页面进行显示。由于 state 只能由拥有他们的组件进行更改，所以我们要在 App 组件中添加一个用于触发 state 改变的回调函数向下传递。我们可以使用按钮的 onClick 事件来监听用户的输入，并通知回调函数。然后该回调函数将调用 setState()，从而更新应用。

从仓库中导入需要使用的 js 文件

src/logic/*

修改 React 代码

// App.js
export default class App extends Component {
    ...

    handleClick = buttonName => {
        this.setState(calculate(this.state, buttonName))
    }

    render() {
                ...
                <ButtonPanel clickHandler={this.handleClick} />
                ...
    }
}

// ButtonPanel.js
export default function ButtonPanel(props) {
    return(
        ...
            <div>
                <Button name="AC" clickHandler={props.clickHandler}/>
                <Button name="+/-" clickHandler={props.clickHandler}/>
                <Button name="%"clickHandler={props.clickHandler}/>
                <Button name="÷" clickHandler={props.clickHandler} orange/>
            </div>
            <div>
                <Button name="7" clickHandler={props.clickHandler}/>
                <Button name="8" clickHandler={props.clickHandler}/>
                <Button name="9"clickHandler={props.clickHandler}/>
                <Button name="×" clickHandler={props.clickHandler} orange/>
            </div>
            <div>
                <Button name="4" clickHandler={props.clickHandler}/>
                <Button name="5" clickHandler={props.clickHandler}/>
                <Button name="6"clickHandler={props.clickHandler}/>
                <Button name="-" clickHandler={props.clickHandler} orange/>
            </div>
            <div>
                <Button name="1" clickHandler={props.clickHandler}/>
                <Button name="2" clickHandler={props.clickHandler}/>
                <Button name="3"clickHandler={props.clickHandler}/>
                <Button name="+" clickHandler={props.clickHandler} orange/>
            </div>
            <div>
                <Button name="0" clickHandler={props.clickHandler} wide/>
                <Button name="." clickHandler={props.clickHandler}/>
                <Button name="=" clickHandler={props.clickHandler} orange/>
            </div>
        ...
    )
}

// Button.js
export default function Button(props) {
    return (
        <div className={className}>
            <button onClick={() => props.clickHandler(props.name)}>{props.name}</button>
        </div>
    )
}