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

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

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>
        )
    }
}

我希望这有帮助！

Answer 2

我个人会在componentWillMount函数中使用this.setState（{}）将其置于状态。

像

这样的东西

export default class ListUnitItem extends React.Component {
    componentWillMount() {
        let number = this.props.number;

        if(number > 1000) {
            number = numeral(number).format('0.0a');
        }

        this.setState({number})
    }

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

Answer 3

您不需要任何lifecycle方法，因为如果在props值中发生任何更改，格式化程序将不会应用于此，请使用它：

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

_fromatNum(){
     let number = this.props.number;
     if(number > 1000) {
         number = numeral(number).format('0.0a');
     }
     return number;            
}

在范围之外的React JS Access变量

3 个答案: