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

不要忘记修复组件名称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>

Answer 2

没有Javascript不会将falsy string与false进行比较，如果您希望这样做，您可以通过检查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')
);

Answer 3

所有false，0，空字符串''和""，NaN，undefined和null始终评价为假;其他一切都是真的。

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

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

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

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

并了解有关运营商here

的更多信息

JSX中的虚假值反应

3 个答案: