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

如果expr 是"truthy"，则if (expr) 将被视为true。

如果<str> 等于'1'，则'<str>' == true 表达式将被视为true。

在你的情况下，这样做可能更有意义

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

参考资料：

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

Answer 2

使用if(this.state.username==true) 和if(this.state.username) 是有区别的。使用前者将this.state.username 的值与true 进行比较，这当然是假的，除非它返回一个字符串值1，在这种情况下它将返回true。
但是，执行后者会将this.state.username 转换为布尔值并检查this.state.username 是否有值（比如不是undefined）。
所以如果你想使用if(this.state.username==true)，你必须首先使用!!（或Boolean）将this.state.username转换为布尔值：

if(!!this.state.username==true) {
  // your code goes here
}

Answer 3

哈哈，太好笑了。我已经用所有真假都试过了。让我们看看结果：

console.log('Truthies:')
console.log('"a" == true           returns:', "a" == true)
console.log('"1" == true           returns:', "1" == true)
console.log('1 == true             returns:', 1 == true)
console.log('3 == true             returns:', 3 == true)
console.log('-1 == true            returns:', -1 == true)
console.log('[] == true            returns:', [] == true)
console.log('{} == true            returns:', {} == true)
console.log('function a(){return true} == true    returns:', function
a(){return true} == true)
console.log('"true" == true        returns:', "true" == true)

console.log('')
console.log('Falsies:')
console.log('NaN == false          returns:', NaN == false)
console.log('"" == false           returns:', "" == false)
console.log('`` == false           returns:', `` == false)
console.log('0 == false            returns:', 0 == false)
console.log('undefined == false    returns:', undefined == false)
console.log('null == false         returns:', null == false)


console.log('')
console.log('Truthies not-equal false:')
console.log('"a" !== false           returns:', "a" !== false)
console.log('1 !== false             returns:', 1 !== false)
console.log('"1" !== false           returns:', "1" !== false)
console.log('3 !== false             returns:', 3 !== false)
console.log('-1 !== false            returns:', -1 !== false)
console.log('[] !== false            returns:', [] !== false)
console.log('{} !== false            returns:', {} !== false)
console.log('function a(){return true} !== false     returns:', function
a(){return true} !== false)
console.log('"true" !== false         returns:', "true" !== false)

console.log('')
console.log('Truthies not-equal true:')
console.log('"a" !== true           returns:', "a" !== true)
console.log('1 !== true             returns:', 1 !== true)
console.log('"1" !== true           returns:', "1" !== true)
console.log('3 !== true             returns:', 3 !== true)
console.log('-1 !== true            returns:', -1 !== true)
console.log('[] !== true            returns:', [] !== true)
console.log('{} !== true            returns:', {} !== true)
console.log('function a(){return true} !== true     returns:', function
a(){return true} !== false)
console.log('"true" !== true         returns:', "true" !== true)

有一些棘手的事情。例如。 1 == true 和 1 !== true 都是 true ?。

无论如何...为了安全起见，您最好使用!!：

const { useState } = React

const MyForm = () => {
  const [state, setState] = useState({ username: '' })

  const handleChange = ({ target: { name, value } }) => {
    setState({ [name]: value })
  }
  
  return (
    <form>
      {!!state.username && (
        <h1>Hello {state.username}</h1>
      )}
      <p>Enter your name:</p>
      <input
        name="username"
        type="text"
        onChange={handleChange}
      />
    </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>

为了简单起见，您可以使用钩子、函数式组件、内联 jsx 运算符和解构。

Answer 4

数据类型username不是布尔值而是字符串，字符串验证使用!== ''