在 React.js 中导入实用函数
介绍
随着 React.js 应用的发展，您可能会发现代码中存在某些代码异味，例如重复。通常，这些逻辑例程会从代码中提取为实用函数，并放置在单独的文件中，以便其他组件可以使用它们。例如格式化数字或执行各种计算。在本指南中，您将创建一个玩具应用，通过将函数分成单独的文件并从组件中导入这些函数来应用这些概念。该应用接收 BTC（一种加密货币）的输入和 BTC 兑美元的汇率，并根据这些输入显示您将拥有的美元。
设置
首先创建名为BTCDollarConverter的组件，如下所示：
import React from 'react';
export default class BTCDollarConverter extends React.Component {
constructor(props) {
super(props);
this.state = {
btc: 0.00,
btcRate: 0.00,
dollars: 0.00
}
}
handleBtcChanged(event) {
var btc = parseFloat(event.target.value);
var dollars = btc * this.state.btcRate;
this.setState({
btc: btc,
dollars: dollars
});
}
handleBtcRateChanged(event) {
var btcRate = parseFloat(event.target.value);
var dollars = this.state.btc * btcRate;
this.setState({
btcRate: btcRate,
dollars: dollars
});
}
render() {
return (
<div>
BTC:
<input
type="number"
value={this.state.btc}
onChange={this.handleBtcChanged.bind(this)}
/>
at
<input
type="number"
value={this.state.btcRate}
onChange={this.handleBtcRateChanged.bind(this)}
/>
Dollars per BTC = {this.state.dollars}
</div>
);
}
}
该组件维护三种状态：
- btc：你拥有的 BTC 数量
- btcRate：每 BTC 的美元汇率
- 美元：您拥有的比特币数量乘以btcRate后，您将得到多少美元
第一个输入控制您拥有的 BTC 数量，由组件的render()方法提供：
<input
type="number"
value={this.state.btc}
onChange={this.handleBtcChanged.bind(this)}
/>
如你所见，这个输入元素绑定到了状态btc，每次用户更改值时，它都会触发onChange属性所绑定的this.handleBtcChanged(event)：
handleBtcChanged(event) {
var btc = parseFloat(event.target.value);
var dollars = btc * this.state.btcRate;
this.setState({
btc: btc,
dollars: dollars
});
}
逻辑非常简单。它首先获取输入的值并将其存储在临时变量btc中。它将该值与当前btcRate状态值相乘以得出美元金额。然后它调用setState()来更新btc和美元的状态值，迫使组件使用更新后的值重新渲染。
btcRate的输入也是如此：
<input
type="number"
value={this.state.btcRate}
onChange={this.handleBtcRateChanged.bind(this)}
/>
它的值与状态值btcRate绑定。每次用户修改输入元素时，它都会调用handleBtcRateChanged(event)：
handleBtcRateChanged(event) {
var btcRate = parseFloat(event.target.value);
var dollars = this.state.btc * btcRate;
this.setState({
btcRate: btcRate,
dollars: dollars
});
}
此方法获取输入并将其存储在临时变量btcRate中，然后将其乘以this.state.btc的当前状态以得出最终的美元金额。然后通过setState()更新btcRate和美元金额。
创建实用函数
请注意，每次输入发生变化时，无论是btc还是btcRate，美元变量都会重新计算并自动显示。这种方法有两个问题：
- handleBtcChanged()和handleBtcRateChanged的计算是相同的。
- 美元值未格式化并且将显示计算出的小数位数。
为了解决这些问题，您需要在组件将导入的单独文件中创建两个单独的函数。您始终可以在组件内使用这些函数，但实际上，为了便于重复使用，应将这些实用函数放在各自的文件中。
计算函数
由于计算只是两个值的乘法，解决第一个问题的函数将如下所示：
function computeDollars(btc, btcRate) {
return btc * btcRate;
}
格式化函数
假设美元的格式规则是小数点左边每三位数字加一个“，”并且数值应四舍五入到小数点后两位。该函数如下所示：
function formatDollars(dollars) {
dollars = (Math.round(dollars * 100) / 100).toFixed(2);
dollars = dollars.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return dollars;
}
函数中的第一行将值四舍五入到小数点后两位。第二行使用正则表达式作为replace()的第一个参数，查找每组三个整数的位置，而第二个参数是将插入到该位置的字符。
使用外部文件
将这两个函数放在与组件位于同一目录中的外部 JavaScript 文件中，名为utils.js 。由于函数将作为模块导出，因此您需要在其前面加上export关键字。utils.js将如下所示：
export function computeDollars(btc, btcRate) {
return btc * btcRate;
}
export function formatDollars(dollars) {
dollars = (Math.round(dollars * 100) / 100).toFixed(2);
dollars = dollars.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return dollars;
}
在您的BTCDollarConverter组件上，在文件顶部（在import React from 'react'之后）添加以下内容以导入两个函数：
import { computeDollars, formatDollars } from './utils.js';
您现在可以调用组件内的实用函数。handleBtcChanged (event)和handleBtcRateChanged(event)现在将是：
handleBtcChanged(event) {
var btc = parseFloat(event.target.value);
var dollars = computeDollars(btc, tihs.state.btcRate);
this.setState({
btc: btc,
dollars: dollars
});
}
handleBtcRateChanged(event) {
var btcRate = parseFloat(event.target.value);
var dollars = computeDollars(this.state.btc, btcRate);
this.setState({
btcRate: btcRate,
dollars: dollars
});
}
在render()方法中，显示美元现在将如下所示：
Dollars per BTC = {formatDollars(this.state.dollars)}
总体代码
utils.js将包含：
export function computeDollars(btc, btcRate) {
return btc * btcRate;
}
export function formatDollars(dollars) {
dollars = (Math.round(dollars * 100) / 100).toFixed(2);
dollars = dollars.<span class="hlj免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~