andreypopp / andreypopp/react-async
render a component outside React from client side in an isomorphic app
- Dominant language
- JavaScript
- Stars
- 440
- Forks
- 24
- PR merge metrics
- No merged PRs in 30d
Description
I asked this question in http://stackoverflow.com/questions/27913004/react-js-render-a-component-from-outside-react and am yet to get any answer and therefore will describe below here.
From http://facebook.github.io/react/docs/component-api.html :
"The only way to get a handle to a React Component instance outside of React is by storing the return value of React.render."
I need to render a React component outside React and the reason for it I'm going to mention below.
In my node.js, expressJS app, I am using 'react-router-component' from here https://github.com/STRML/react-router-component and 'react-async'.
In app.js -the file which is supposed to be run ,
```
var url=require('url');
var App=require('./react/App.jsx');
var app = express();
app.get('*',function(req,res){
var path = url.parse(req.url).pathname;
ReactAsync.renderComponentToStringWithAsyncState(App({path:path}),function(err, markup) {
res.send(''+markup);
});
});
```
In App.jsx,
```
PostList = require('./components/PostList.jsx');
var App = React.createClass({
render: function() {
return (
});
```
bundle.js is the browserified file from all the .jsx files.
In PostList.jsx,
```
var PostList = React.createClass({
mixins: [ReactAsync.Mixin],
getInitialStateAsync: function(cb) {
if(typeof this.props.prods==='undefined'){
request.get('http://localhost:8000/api/cats_default', function(response) {
cb(null, {items_show:response.body});
});
}
},
setTopmostParentState: function(items_show){
this.setState({
items_show:items_show
});
},
render: function() {
return (
**// Things go here**
}
});
PostListRender=function(cart_prods){
var renderNow=function(){
//return
React.renderComponent(,document.getElementById('postList') );
};
return {
renderNow:renderNow
}
};
module.exports=PostList;
```
In custom.js:
```
$('.click_me').click(function(){
PostListRenderObj=PostListRender(products_cart_found);
PostListRenderObj.renderNow();
});
```
The page shows well. But when I click on the click_me element, the browser shows script busy, console shows
ReactJS - ReactMount: Root element has been removed from its original container. New container
And the Firebug log limit exceeds.
**So why I want to render on click from outside react.js:** I have to run the http://github.hubspot.com/odometer - jQuery Odomoeter plugin. The plugin was not developed as a node middleware although it can be installed the way a middleware is installed and the plugin codebase is saved inside node_modules folder. If I do not require the plugin to be a middleware from inside node and just include it in the page before the browserified JS file and perform the click event inside React, then the odometer animation is not properly shown.
**The React site as mentioned in the beginning tells to hold the return value of `React.render` to use it outside Reatct . But no such method is available in `react-async` middleware.**
So what is the way to render the PostList React component outside React on clicking the `click_me div` ?
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.