Clarify react

This commit is contained in:
Rico Sta. Cruz 2015-04-17 18:36:25 +08:00
parent 30f72174a5
commit 18ab38aa49
1 changed files with 17 additions and 9 deletions

View File

@ -39,22 +39,30 @@ var Info = React.createClass({
``` ```
## States & Properties ## States & Properties
Use [props](https://facebook.github.io/react/docs/tutorial.html#using-props) (`this.props`) to access parameters passed from the parent.
Use [states](https://facebook.github.io/react/docs/tutorial.html#reactive-state) (`this.state`) to manage dynamic data.
{:.center}
```js ```js
this.setState({ editing: true }); this.setProps({ fullscreen: true });
this.state.editing === true this.setState({ username: 'rstacruz' });
this.props.fullscreen === true
this.state.username === 'rstacruz'
this.replaceProps({ ... });
this.replaceState({ ... }); this.replaceState({ ... });
``` ```
```js ```js
this.setProps({ fullscreen: true }); render: function () {
this.props.fullscreen === true return <div class={this.props.fullscreen ? 'full' : ''}>
Welcome, {this.state.username}
this.replaceProps({ ... }); </div>;
}
``` ```
### Initial data ### Setting defaults
```js ```js
React.createClass({ React.createClass({
@ -355,8 +363,8 @@ return <div style={style}></div>;
See [dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html). See [dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html).
```js ```js
function createMarkup() { return {__html: 'First &middot; Second'}; }; function markdownify() { return "<p>...</p>"; }
<div dangerouslySetInnerHTML={createMarkup()} /> <div dangerouslySetInnerHTML={{__html: markdownify()}} />
``` ```
### Lists ### Lists