Cleanup "JSX Gotchas"

This commit is contained in:
Paul O’Shannessy
2013-07-16 23:27:36 -07:00
parent b9b300fcbd
commit 5a3a39aba4
+6 -2
View File
@@ -1,14 +1,16 @@
---
id: jsx-gotchas
title: JSX gotchas
title: JSX Gotchas
layout: docs
permalink: jsx-gotchas.html
prev: jsx-in-depth.html
next: interactivity-and-dynamic-uis.html
---
JSX looks like HTML but there are some important differences you may run into.
## Whitespace removal
## Whitespace Removal
JSX doesn't follow the same whitespace elimination rules as HTML. JSX removes all whitespace between two curly braces expressions. If you want to have whitespace, simply add `{' '}`.
@@ -18,6 +20,7 @@ JSX doesn't follow the same whitespace elimination rules as HTML. JSX removes al
Follow [Issue #65](https://github.com/facebook/react/issues/65) for discussion on this behavior.
## HTML Entities
You can insert HTML entities within literal text in JSX:
@@ -58,6 +61,7 @@ As a last resort, you always have the ability to insert raw HTML.
<div dangerouslySetInnerHTML={{'{{'}}__html: 'First &middot; Second'}} />
```
## Custom HTML Attributes
If you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them. If you want to use a custom attribute, you should prefix it with `data-`.