You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.0 KiB
37 lines
1.0 KiB
11 years ago
|
---
|
||
|
|
id: if-else-in-JSX
|
||
|
|
title: If-Else in JSX
|
||
|
|
layout: docs
|
||
|
|
permalink: inline-styles.html
|
||
|
|
script: "cookbook/inline-styles.js"
|
||
|
|
---
|
||
|
|
|
||
|
|
### Problem
|
||
|
|
You want to use conditional in JSX.
|
||
|
|
|
||
|
|
### Solution
|
||
|
|
Don't forget that JSX is really just sugar for functions:
|
||
|
|
|
||
|
|
```html
|
||
|
|
/** @jsx React.DOM */
|
||
|
|
|
||
|
|
// this
|
||
|
|
React.renderComponent(<div id="msg">Hello World!</div>, mountNode);
|
||
|
|
// is the same as this
|
||
|
|
React.renderComponent(React.DOM.div({id:"msg"}, "Hello World!"), mountNode);
|
||
|
|
```
|
||
|
|
|
||
|
|
Which means `<div id={if (true){ 'msg' }}>Hello World!</div>` doesn't make sense, as (if it worked) it would be compiled down to something like this `React.DOM.div({id: if (true){ 'msg' }}, "Hello World!")`, which isn't valid JS.
|
||
|
|
|
||
|
|
What you're searching for is ternary expression:
|
||
|
|
|
||
|
|
```html
|
||
|
|
/** @jsx React.DOM */
|
||
|
|
|
||
|
|
// this
|
||
|
|
React.renderComponent(<div id={true ? 'msg' : ''}>Hello World!</div>, mountNode);
|
||
|
|
```
|
||
|
|
|
||
|
|
### Discussion
|
||
|
|
Try the [JSX compiler](http://facebook.github.io/react/jsx-compiler.html) to see how this works. It's a very simple transformation, thus making JSX entirely optional to use with React.
|