JSX中的虚假值反应

时间:2017-12-30 10:01:57

标签: javascript reactjs

我正在学习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'评估为伪值。

3 个答案:

答案 0 :(得分:5)

不要忘记修复组件名称it should start with uppercase letters

<小时/> 这些条件与JSX无关,正如其他评论和答案中所述。这就是JavaScript的工作原理。

请注意,重要的是要记住:
永远不要对布尔值做双等于(==)a.k.a "Abstract Equality",这就是要求错误。

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

例如,

if(2 == true) //returns false

if(2 == false) // returns false

来自spec

  

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

     

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

相反,您可以进行隐式检查:

if (this.props.signedIn)  

或明确检查,但使用三等于a.k.a "strict equality"

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) 

工作得很好。

<小时/> 在没有传递prop的情况下运行示例:

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>

答案 1 :(得分:1)

没有Javascript不会将falsy stringfalse进行比较,如果您希望这样做,您可以通过检查if条件并且不提供falsy boolean值作为道具来完成。

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

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

和一个真实的案例

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

答案 2 :(得分:0)

所有false0,空字符串''""NaNundefinednull始终评价为假;其他一切都是真的。

除了模板系统之外,JSX本身不提供任何东西。所以它基于javascript而不是JSX。

所以在你的例子中你可以删除== false,javascript将为你评估所有这些模式。

顺便说一下,您可以在此链接中查看ng-hide源以了解更多信息

https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js

并了解有关运营商here

的更多信息