JSX中的虚假值反应

Question

I am learning reactJs and trying to pass a property to a component.

Code is as follow -

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

This works, but notice the part where I have to inject false as javascript wrapped in curly braces.

My doubt is that does JSX not recognize 'false' string as falsy value as in normal JS?

Reason for asking- Comparison with ng-show="false" in angular, which hides the element, But as discussed in comment that might be because ng-show directive manually evaluate 'false' as falsy value.

Answer 1

Don't forget to fix the component name, it should start with uppercase letters .

---

The conditions has nothing to do with JSX , as mentioned in other comments and answers. This is just how JavaScript works.

Please Note , important thing to remember:
Never ever do a double equals ( == ) aka "Abstract Equality" against a Boolean, This is asking for bugs.

Because the engine will do a type coercion only on the Boolean value and this can lead to unexpected behavior.

For example,

 if(2 == true) //returns false 

and

 if(2 == false) // returns false 

from the spec :

If Type(x) is Boolean, return the result of the comparison ! ToNumber(x) == y.

If Type(y) is Boolean, return the result of the comparison x == ! ToNumber(y).

Instead, you could do an implicit check:

 if (this.props.signedIn) 

Or explicit check but use the triple equals aka "strict equality"

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

---

As for the react part: Again, it's basically just JavaScript functions and objects after all.
When you are not passing a prop then it will be undefined :

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

So, an implicit check like mentioned above:

 if (this.props.signedIn) 

Will work just fine.

---

Running example without passing the 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> 

Running example with a false passed in:

 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> 

Running example with a true passed in:

 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

No Javascript doesn't compare a falsy string with false , if you wish to do that, you could simply do it by checking the if condition and not supplying the falsy boolean value as a prop.

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

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

and a truthy case as

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

Answer 3

All false , 0 , empty strings '' and "" , NaN , undefined , and null are always evaluated as false; everything else is true.

JSX does not provide anything by itself except the templating system. so its base on javascript and not the JSX.

so in you'r example you can just remove the == false and javascript will evaluate all those patterns for you.

by the way you can take a look at ng-hide source in this link to learn more

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

and also learn more about operator here