javascript - React JS 访问变量超出范围

Question

我正在尝试使用数字js格式化数字 - 这是我记录number的工作。

当 let number 位于渲染函数之外时，如何访问它以向下传递到元素“unit-item-number”？

import React from "react";

import listUnitItem from "./listUnitItem.scss";

//Number formatting
const numeral = require('numeral');

export default class ListUnitItem extends React.Component {
    componentDidMount() {
        //format numbers greater than 1000
        let number = this.props.number;
        if(number > 1000) {
            //only format number
            number = numeral(number).format('0.0a');
        } else {
            return number
        }
        console.log(number);
    }

    render() {
        return(
            <li className="list-unit-item col-sm-2">
                <span className="unit-item-number">{this.props.number}</span>
                <span className="unit-item-title">{this.props.title}</span>
            </li>
        )
    }
}

Answer 1

虽然上面的答案是有效的，但编写模块化代码并保持你的 react 组件无状态(没有状态变量)总是好的。以下代码显示了解决您的问题的更好方法:

import React from "react";

import listUnitItem from "./listUnitItem.scss";

//Number formatting
const numeral = require('numeral');

export default class ListUnitItem extends React.Component {
    // Save this method in some Utils class where you can access from other components.
    getFormattedNumber(number){
        //format numbers greater than 1000
        if (number > 1000) {
            //only format number
            number = numeral(number).format('0.0a');
        }
        return number
    }

    render() {
        return(
            <li className="list-unit-item col-sm-2">
                <span className="unit-item-number">{this.getFormattedNumber(this.props.number)}</span>
                <span className="unit-item-title">{this.props.title}</span>
            </li>
        )
    }
}

希望这会有所帮助!