Cheng Lou
11 years ago
committed by
Connor McSheffrey
2 changed files with 61 additions and 0 deletions
@ -0,0 +1,29 @@ |
|||||
|
--- |
||||
|
id: false-in-jsx-tip |
||||
|
title: False in JSX |
||||
|
layout: cookbook |
||||
|
permalink: initial-ajax.html |
||||
|
prev: initial-ajax.html |
||||
|
--- |
||||
|
|
||||
|
Here's how `false` renders in different contexts: |
||||
|
|
||||
|
Renders as `id="false"`: |
||||
|
```js |
||||
|
/** @jsx React.DOM */ |
||||
|
React.renderComponent(<div id={false} />, mountNode); |
||||
|
``` |
||||
|
|
||||
|
String "false" as input value: |
||||
|
```js |
||||
|
/** @jsx React.DOM */ |
||||
|
React.renderComponent(<input value={false} />, mountNode); |
||||
|
``` |
||||
|
|
||||
|
No child: |
||||
|
```js |
||||
|
/** @jsx React.DOM */ |
||||
|
React.renderComponent(<div>{false}</div>, mountNode); |
||||
|
``` |
||||
|
|
||||
|
The reason why this one doesn't render as the string `"false"` as a `div` child is to allow the more common use-case: `<div>{x > 1 && You have more than one item}</div>`. |
@ -0,0 +1,32 @@ |
|||||
|
--- |
||||
|
id: false-in-jsx |
||||
|
title: False in JSX |
||||
|
layout: cookbook |
||||
|
permalink: initial-ajax.html |
||||
|
prev: initial-ajax.html |
||||
|
--- |
||||
|
|
||||
|
### Problem |
||||
|
How does `undefined` and `false` behave as attribute value and as child component? |
||||
|
|
||||
|
### Solution |
||||
|
Renders as `id="false"`: |
||||
|
```js |
||||
|
/** @jsx React.DOM */ |
||||
|
React.renderComponent(<div id={false} />, mountNode); |
||||
|
``` |
||||
|
|
||||
|
String "false" as input value: |
||||
|
```js |
||||
|
/** @jsx React.DOM */ |
||||
|
React.renderComponent(<input value={false} />, mountNode); |
||||
|
``` |
||||
|
|
||||
|
No child: |
||||
|
```js |
||||
|
/** @jsx React.DOM */ |
||||
|
React.renderComponent(<div>{false}</div>, mountNode); |
||||
|
``` |
||||
|
|
||||
|
### Discussion |
||||
|
The reason why the last one doesn't render as the string `"false"` as a `div` child is to allow the more common use-case: `<div>{x > 1 && You have more than one item}</div>`. |
Loading…
Reference in new issue