React JS访问变量超出范围

我想格式化数字使用数字js - 这是工作我登录number。React JS访问变量超出范围

如何访问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> 
     ) 
    } 
}

来源

2017-02-22 Filth

虽然上面的答案是有效的，它总是好的写模块化代码，并保持你的反应的组分无国籍（无需国家诉ariables）。以下代码显示了针对您的问题的更好方法：

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

我希望这有助于您！

来源

2017-02-22 10:00:24

非常感谢你的队友。我完全赞成无状态组件，因为它是创建反应组件的更简洁的方式。将这标记为适合他人的解决方案。 – Filth

这是真的！我花了一些时间来适应这种无国籍的概念！干杯 –

我会亲自把这个状态在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> 
     ) 
    } 
}

来源

2017-02-22 09:53:31

伴侣是完美的！很近我猜哈哈。谢了哥们！ – Filth

不是问题:) –

您不需要这方面的任何lifecycle方法，因为如果在道具价值发生任何变化，格式将不会在该应用中，使用这样的：

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

来源

2017-02-22 09:55:45

React JS访问变量超出范围

回答

相关问题