mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Cleanup "JSX Gotchas"
This commit is contained in:
@@ -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 · 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-`.
|
||||
|
||||
Reference in New Issue
Block a user