diff --git a/README.md b/README.md index 8bf134d3..d702e4fa 100644 --- a/README.md +++ b/README.md @@ -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 @@ -105,6 +105,38 @@ React.render(, document.body) person.name = "Mike" // will cause the Observer region to re-render ``` +Example2: + +```javascript +class App extends React.Component { + render() { + return ( + + + + ) + } +} +const Comp = () => ( +
+ ({ h: store.h, w: store.w })} + render={props => {`${props.h} ${props.w}`}} + /> +
) +/* or +const Comp = () => ( +
+ ({ h: store.h, w: store.w })}> + {props => {`${props.h} ${props.w}`}} + +
) +*/ + +React.render(, 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. @@ -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`. + +