javascript - reactjs组件中if(x)和if(x==true)的区别

Question

当我在下面写 ReactJs 代码时，我首先使用了 if(this.state.username==true)并没有得到我预期的结果。
但是当我使用 if(this.state.username)它按我的需要工作。因此，我可以明显看出 if(x==true) 之间存在差异。和 if(x) .我也知道，有时，它们可能意味着相同并产生相同的结果。
我的问题是，如果我的构造函数设置如下，为什么这两个表达式的行为会有所不同。 if(this.state.username)的真正含义是什么这里？
谢谢你帮助我理解。

  constructor(props){
    super(props)
    this.state = {username:""}
  }

两个代码如下:

class MyForm extends React.Component {
  constructor(props){
    super(props)
    this.state = {username:""}
  }
  changeName = (e) =>{
    let target = e.target;
    let name   = target.name; 
      let value  = target.value;
    this.setState ({[name]: value});
  }
  render(){
    let myHeader;
    if(this.state.username==true){
        myHeader = <h1>Hello {this.state.username}</h1>;
    }else{
        myHeader = "";
    }
    return (
      <form>
        {myHeader}
        <h1>{this.state.username}</h1>
        <p>Enter your name:</p>
        <input
          name='username'
          type="text"
          onChange = {this.changeName}
        />
      </form>
    );
  }
}   
ReactDOM.render(<MyForm />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>


<div id="root"></div>

和

class MyForm extends React.Component {
  constructor(props){
    super(props)
    this.state = {username:""}
  }
  changeName = (e) =>{
    let target = e.target;
    let name   = target.name; 
      let value  = target.value;
    this.setState ({[name]: value});
  }
  render(){
    let myHeader;
    if(this.state.username){
        myHeader = <h1>Hello {this.state.username}</h1>;
    }else{
        myHeader = "";
    }
    return (
      <form>
        {myHeader}
        <h1>{this.state.username}</h1>
        <p>Enter your name:</p>
        <input
          name='username'
          type="text"
          onChange = {this.changeName}
        />
      </form>
    );
  }
}   
ReactDOM.render(<MyForm />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>


<div id="root"></div>

Answer 1

if (expr)将被视为 true如果 expr是 "truthy" .'<str>' == true表达式将被视为 true如果 <str>等于 '1' .
在您的情况下，这样做可能更有意义

if (this.state.username !== '') {

引用:

https://tc39.es/ecma262/#sec-equality-operators

https://tc39.es/ecma262/#sec-islooselyequal