Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs section for non-dom attributes and more in dom differences #675

Merged
merged 2 commits into from
Dec 18, 2013
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/_data/nav_docs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -55,3 +55,5 @@
title: Event System
- id: dom-differences
title: DOM Differences
- id: special-non-dom-attributes
title: Special Non-DOM attributes
4 changes: 3 additions & 1 deletion docs/docs/ref-04-tags-and-attributes.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,9 @@ rowSpan scrollLeft scrollTop selected size spellCheck src step style tabIndex
target title type value width wmode
```

In addition, the non-standard `autoCapitalize` attribute is supported for Mobile Safari.
The non-standard `autoCapitalize` attribute is supported for Mobile Safari.

In addition, there is the React-specific attribute `dangerouslySetInnerHTML` ([more here](/react/docs/special-non-dom-attributes.html)), used for directly inserting DOM strings into a component.

### SVG Attributes

Expand Down
2 changes: 2 additions & 0 deletions docs/docs/ref-06-dom-differences.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ title: DOM Differences
layout: docs
permalink: dom-differences.html
prev: events.html
next: special-non-dom-attributes.html
---

React has implemented a browser-independent events and DOM system for performance and cross-browser compatibility reasons. We took the opportunity to clean up a few rough edges in browser DOM implementations.
Expand All @@ -12,3 +13,4 @@ React has implemented a browser-independent events and DOM system for performanc
* The `style` attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM `style` JavaScript property, is more efficient, and prevents XSS security holes.
* All event objects conform to the W3C spec, and all events (including submit) bubble correctly per the W3C spec. See [Event System](events.html) for more details.
* The `onChange` event behaves as you would expect it to: whenever a form field is changed this event is fired rather than inconsistently on blur. We intentionally break from existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to react to user input in real time. See [Forms](forms.html) for more details.
* Form input attributes such as `value` and `checked`, as well as `textarea`. [More here](/react/docs/forms.html).
13 changes: 13 additions & 0 deletions docs/docs/ref-07-special-non-dom-attributes.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
id: special-non-dom-attributes
title: Special Non-DOM Attributes
layout: docs
permalink: special-non-dom-attributes.html
prev: dom-differences.html
---

Beside [DOM differences](/react/docs/dom-differences.html), React offers some attributes that simply don't exist in DOM.

- `key`: an optional, unique identifier. When your component shuffles around during `render` passes, it might be destroyed and recreated due to the diff algorithm. Assigning it a key that persists makes sure the component stays. See more [here](/react/docs/multiple-components.html#dynamic-children).
- `ref`: see [here](/react/docs/more-about-refs.html).
- `dangerouslySetInnerHTML`: takes an object with the key `__html` and a DOM string as value. This is mainly for cooperating with DOM string manipulation libraries. Refer to the last example on the front page.