Question

我想在道具的价值为＆＃34; true＆＃34;时显示我的组件。但它始终显示：无＆＃39;。我的主要组件是真是假。

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

Answer 1

这尤其与Javascript相比，与ReactJS有关。我认为您将status作为Component传递给string。那么，当Component看到这种情况时，如何进行比较：

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

当我的组件收到新的道具时，样式不会改变

1 个答案: