JSX中的虚假值反应

Question

我正在学习reactJs并尝试将属性传递给组件.

代码如下 -

import React from 'react';
import ReactDOM from 'react-dom';

class myComponent extends React.Component {
    render() {
        if (this.props.signedIn == false) {
            return <h1>Hi</h1>;
        }
        return <h1>Hello!</h1>;
    }
}

ReactDOM.render(
    <myComponent signedIn={false} />,
    document.getElementById('app')
);

这是有效的,但请注意我必须注入false的部分,因为javascript包裹在花括号中.

我怀疑JSX是不是将'false'字符串识别为普通JS中的虚假值？

询问的原因 - 与角度中的ng-show ="false"进行比较,隐藏元素,但正如评论中所讨论的那样,可能是因为ng-show指令手动将'false'评估为假值.

Answer 1

不要忘记修复组件名称,它应该以大写字母开头.

这些条件与JSX其他评论和答案中提到的无关.这就是JavaScript的工作原理.

请注意,重要的是要记住:
永远不要对布尔做一个double equals(==)又名"Abstract Equality",这就是要求bug.

因为引擎仅对布尔值执行类型强制,这可能导致意外行为.

例如,

if(2 == true) //returns false

和

if(2 == false) // returns false

来自规范:

如果Type(x)是布尔值,则返回比较结果!ToNumber(x)== y.

如果Type(y)是布尔值,则返回比较结果x ==!ToNumber(Y).

相反,你可以做一个隐式检查:

if (this.props.signedIn)  

或明确检查但使用三等于又名"严格平等"

if (this.props.signedIn === false)

至于react部分:再说一遍,它基本上只是JavaScript函数和对象.
当你没有通过时,prop那将是undefined:

this.props.signedIn // signedIn will be undefined if we didn't pass it as a prop

所以,如上所述的隐式检查:

if (this.props.signedIn) 

会工作得很好.

运行示例而不传递道具:

class MyComponent extends React.Component {
  render() {
    if (this.props.signedIn) {
      return <h1>Hi</h1>;
    }
    return <h1>not signed on!</h1>;
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

运行false传入的示例:

class MyComponent extends React.Component {
  render() {
    if (this.props.signedIn) {
      return <h1>Hi</h1>;
    }
    return <h1>not signed on!</h1>;
  }
}

ReactDOM.render(
  <MyComponent signedIn={false}/>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

运行true传入的示例:

class MyComponent extends React.Component {
  render() {
    if (this.props.signedIn) {
      return <h1>Hi</h1>;
    }
    return <h1>not signed on!</h1>;
  }
}

ReactDOM.render(
  <MyComponent signedIn={true}/>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>