JSX中的Falsy值

Question

我正在学习reactJ，并试图将属性传递给组件。

代码如下-

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‘为false值。

Answer 1

别忘了修复组件名，它应该以大写字母开头。。

​

这些条件与JSX无关，正如其他评论和回答中提到的那样。这正是JavaScript的工作方式。

​

请注意，重要的是要记住：

永远不要对布尔值执行双等号(==) a.k.a “抽象平等”，这是在询问bug。

因为引擎将只对布尔值进行类型强制，这可能导致意外行为。

例如,

if(2 == true) //returns false

和

if(2 == false) // returns false

来自等级库：

如果Type(x)是布尔型，则返回比较结果！ToNumber(x) == y. 如果类型(Y)是布尔型，则返回比较x ==的结果！ToNumber(y).

相反，您可以执行一个隐式检查：

if (this.props.signedIn)  

或显式检查，但使用三元等于a.k.a “严格平等”。

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>

​

Answer 2

没有Javascript不将falsy string与false进行比较，如果您希望这样做，只需检查if条件，而不提供虚幻的布尔值作为支柱。

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')
);

Answer 3

所有false、0、空字符串''和""、NaN、undefined和null都被计算为false；其他的都是true。

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

因此，在您的示例中，您只需删除== false，javascript将为您评估所有这些模式。

顺便说一句，您可以在此链接中查看ng-隐藏源代码，以了解更多信息。

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

并了解有关运算符这里的更多信息。