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訪問變量超出範圍

回答

相關問題