amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-24 04:33:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update jsx-is-not-html.md

Browse Source
This commit is contained in:
petehunt
2013-06-17 03:11:57 -06:00
parent 2a77affe0c
commit a77262be5f
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/jsx-is-not-html.md
View File

@@ -10,13 +10,13 @@ JSX looks like HTML but there are some important differences you may run into.
## Whitespace removal
JSX doesn't follow the same whitespace elimination rules as HTML. JSX removes all the whitespaces between two curly braces expressions. If you want to have a white space, a work-around is to add `{' '}`.
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 `{' '}`.
```javascript
<div>{this.props.name} {' '} {this.props.surname}</div>
```
This behavior is still being debated. Follow [Issue #65](https://github.com/facebook/react/issues/65) to be updated on the situation.
Follow [Issue #65](https://github.com/facebook/react/issues/65) for discussion on this behavior.
## HTML Entities
@@ -26,20 +26,20 @@ You can insert HTML entities within literal text in JSX:
<div>First &middot; Second</div>
```
If you want to display an HTML entity within a dynamic content, you will run into double escaping issues as React escapes all the strings you are displaying in order to prevent a wide range of XSS attacks by default.
If you want to display an HTML entity within dynamic content, you will run into double escaping issues as React escapes all the strings you are displaying in order to prevent a wide range of XSS attacks by default.
```javascript
// Bad: It displays "First &middot; Second"
<div>{'First &middot; Second'}</div>
```
There are various ways to work-around this issue. The easiest one is to write unicode character directly in Javascript. You've got to make sure that the file is saved as UTF-8 and that the propers UTF-8 directives are set so the browser will display it correctly.
There are various ways to work-around this issue. The easiest one is to write unicode character directly in Javascript. You need to make sure that the file is saved as UTF-8 and that the proper UTF-8 directives are set so the browser will display it correctly.
```javascript
<div>{'First · Second'}</div>
```
A safer alternative is to find the <a href="http://www.fileformat.info/info/unicode/char/b7/index.htm">unicode number corresponding to the entity</a> and use it inside of a Javascript string.
A safer alternative is to find the [unicode number corresponding to the entity](http://www.fileformat.info/info/unicode/char/b7/index.htm) and use it inside of a JavaScript string.
```javascript
<div>{'First \u00b7 Second'}</div>
@@ -52,29 +52,29 @@ You can use mixed arrays with strings and JSX elements.
<div>{['First ', <span>&middot;</span>, ' Second']}</div>
```
In last resort, you always have the ability to insert raw HTML inside of the div.
As a last resort, you always have the ability to insert raw HTML.
```javascript
<div dangerouslySetInnerHTML={{'{{'}}__html: 'First &middot; Second'}} />
<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />
```
## Comments
JSX supports both single-line and multi-lines Javascript comments within a tag declaration:
JSX supports both single-line and multi-line JavaScript comments within a tag declaration:
```javascript
<div // This is a single line comment:
<div // This is a single-line comment:
/*
And a multiline
And a multi-line
comment
*/
/>
```
As of React 0.3, there is no good way to insert comments within the children section. [Issue #82](https://github.com/facebook/react/issues/82) is tracking progress to enable the following way to write comments:
As of React 0.3, there is no good way to insert comments within the children section. [Issue #82](https://github.com/facebook/react/issues/82) is tracking progress to enable the following:
```javascript
// Note: The following is not implemented yet!
// Note: This is not implemented yet!
<div>
{/* This is a comment */}
</div>