Skip to content
This repository has been archived by the owner on Dec 31, 2020. It is now read-only.

Commit

Permalink
Add Observer render and inject sugar usage in README
Browse files Browse the repository at this point in the history
  • Loading branch information
Sunshine168 committed Feb 1, 2018
1 parent 1c54100 commit 13b416d
Showing 1 changed file with 35 additions and 1 deletion.
36 changes: 35 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ It takes as children a single, argumentless function which should return exactly
The rendering in the function will be tracked and automatically re-rendered when needed.
This can come in handy when needing to pass render function to external components (for example the React Native listview), or if you
dislike the `observer` decorator / function.

And it can work with `Provider` use inject and render property / or just takes as children, detail in Example2.(PS:using children has a priority than render , so dont use at the same time)
Example:

```javascript
Expand All @@ -105,6 +105,38 @@ React.render(<App person={person} />, document.body)
person.name = "Mike" // will cause the Observer region to re-render
```

Example2:

```javascript
class App extends React.Component {
render() {
return (
<Provider h="hello" w="world">
<Comp />
</Provider>
)
}
}
const Comp = () => (
<div>
<Observer
inject={store => ({ h: store.h, w: store.w })}
render={props => <span>{`${props.h} ${props.w}`}</span>}
/>
</div>)
/* or
const Comp = () => (
<div>
<Observer inject={store => ({ h: store.h, w: store.w })}>
{props => <span>{`${props.h} ${props.w}`}</span>}
</Observer>
</div>)
*/

React.render(<App />, document.body)
// will get the same result showing hello world in span tag
```

### Global error handler with `onError`

If a component throws an error, this logs to the console but does not 'crash' the app, so it might go unnoticed.
Expand Down Expand Up @@ -438,3 +470,5 @@ Data will have one of the following formats:

WeakMap. Its `get` function returns the associated reactive component of the given node. The node needs to be precisely the root node of the component.
This map is only available after invoking `trackComponents`.


0 comments on commit 13b416d

Please sign in to comment.