mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
small typo and code tag is now js highlight
Was html before bc github screws up the js highlighting for jsx.
This commit is contained in:
committed by
Connor McSheffrey
parent
7144ba1c10
commit
b92c433c50
@@ -6,9 +6,9 @@ permalink: inline-styles.html
|
||||
script: "cookbook/inline-styles.js"
|
||||
---
|
||||
|
||||
In React, inline styles are nto specified as a string, but as an object whose key is the camelCased version of the style name, and whose value is the style's value in string:
|
||||
In React, inline styles are not specified as a string, but as an object whose key is the camelCased version of the style name, and whose value is the style's value in string:
|
||||
|
||||
```html
|
||||
```js
|
||||
/** @jsx React.DOM */
|
||||
|
||||
var divStyle = {
|
||||
|
||||
@@ -7,12 +7,12 @@ script: "cookbook/inline-styles.js"
|
||||
---
|
||||
|
||||
### Problem
|
||||
You want to put inline style to an element.
|
||||
You want to apply inline style to an element.
|
||||
|
||||
### Solution
|
||||
Instead of writing a string, create an object whose key is the camelCased version of the style name, and whose value is the style's value, in string:
|
||||
|
||||
```html
|
||||
```js
|
||||
/** @jsx React.DOM */
|
||||
|
||||
var divStyle = {
|
||||
|
||||
@@ -8,7 +8,7 @@ script: "cookbook/inline-styles.js"
|
||||
|
||||
`if-else` statements don't work inside JSX, since JSX is really just sugar for functions:
|
||||
|
||||
```html
|
||||
```js
|
||||
/** @jsx React.DOM */
|
||||
|
||||
// this
|
||||
@@ -21,7 +21,7 @@ Which means `<div id={if (true){ 'msg' }}>Hello World!</div>` doesn't make sense
|
||||
|
||||
What you're searching for is ternary expression:
|
||||
|
||||
```html
|
||||
```js
|
||||
/** @jsx React.DOM */
|
||||
|
||||
// this
|
||||
|
||||
@@ -12,7 +12,7 @@ You want to use conditional in JSX.
|
||||
### Solution
|
||||
Don't forget that JSX is really just sugar for functions:
|
||||
|
||||
```html
|
||||
```js
|
||||
/** @jsx React.DOM */
|
||||
|
||||
// this
|
||||
@@ -25,7 +25,7 @@ Which means `<div id={if (true){ 'msg' }}>Hello World!</div>` doesn't make sense
|
||||
|
||||
What you're searching for is ternary expression:
|
||||
|
||||
```html
|
||||
```js
|
||||
/** @jsx React.DOM */
|
||||
|
||||
// this
|
||||
|
||||
Reference in New Issue
Block a user