當我的組件收到一個新的道具時，樣式不會改變

當道具的值爲「true」但它總是'display：none'時，我想顯示我的組件。我的主要組件發送它的真或假。當我的組件收到一個新的道具時，樣式不會改變

import React    from 'react'; 
import Header    from '../../Header/Header'; 

export default class Body extends React.Component { 
    constructor(props){ 
     super(); 
     this.state = {}; 
} 

render(){ 
    if(this.props.status == true){ 
     var BodyVisibility = { 
      display: 'visible' 
     } 
    } 
    else { 
     var BodyVisibility = { 
      display: 'none' 
     } 
    } 
    return(
      <div className='body' style={BodyVisibility}> 
       <Header /> 
      </div> 
     ) 
    } 
}

來源

2017-03-19 Nedjim DN

這比JavaScript特別與ReactJS相關。我想你是通過status到Component作爲string。那麼，如何比較發生在您的組件認爲是這樣的：

if('true' == true)

所以，比較發生在一個string和boolean之間。由於類型強制，Javascript將兩者都轉換爲Number並進行比較。請參閱this瞭解更多詳情。 string的值評估爲NaN和true值爲1。所以強制轉換後的對比是：

if(NaN == 1)

這總是會給false因此您的結果。

爲了解決這個問題，你應該使用兩個運營商的字符串是這樣的：

if(this.props.status == 'true')

雖然，作爲一個更好的做法，它總是最好使用===嚴格的平等。此外，你正在訪問一個超出其範圍的變量（這將在這裏工作，但不是一個好的做法）。更好的代碼版本是：

var BodyVisibility = { 
    display: 'none' 
} 

if(this.props.status === 'true'){ 
    BodyVisibility.display = 'visible' 
}

來源

2017-03-19 13:06:29

當我的組件收到一個新的道具時，樣式不會改變

回答

相關問題