Render a component from outside ReactJS

node.js express reactjs react-jsx react-async

11,774

I cannot understand your question description, but this answers the title question:

How you render React components outside of react?

MyComponent = require('MyComponent')

element = document.getElementById('postList');

renderedComp = ReactDOM.render(MyComponent,{...someProps},element); 

// => render returns the component instance.

$(document).on('something, function(){
   renderedComp.setState({thingClicked: true})
})

Inside of react you can just call the component.

11,774

Author by

Istiaque Ahmed

A programmer anyway

Updated on July 26, 2022

Comments

Istiaque Ahmed almost 2 years

From here :

"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' 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){


    //}); SEE EDIT 1 BELOW

    var path = url.parse(req.url).pathname;
                ReactAsync.renderComponentToStringWithAsyncState(App({path:path}),function(err, markup) {
    res.send('<!DOCTYPE html>'+markup);

          });
   });

In App.jsx,

   PostList = require('./components/PostList.jsx');
   var App = React.createClass({
   render: function() {
        return (

           <html>
           <head lang="en">
           </head>
        <body>
        <div id="main">

        <Locations path={this.props.path}>

          <Location path="/" handler={PostList} />
          <Location path="/admin" handler={Admin} />
        </Locations>


       <script type="text/javascript" src="/scripts/react/bundle.js"></script>
       <script type="text/javascript" src="/scripts/custom.js"></script>                 

        </body>
        </html>
        });

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 (

              <div className="postList" id="postList">
              **// Things go here** 
              <div className="click_me" >Click me</div>
              </div>    
            }

    });


    PostListRender=function(cart_prods){

        var renderNow=function(){

            //return <PostList  cart_prods={cart_prods}></PostList>

             React.renderComponent(<PostList  cart_prods={cart_prods}></PostList>,document.getElementById('postList') );  
                                 };

         return {
           renderNow:renderNow
                }   
        };
    module.exports=PostList;

In custom.js:

$('.click_me').click(function(){

PostListRenderObj=PostListRender(products_cart_found);
PostListRenderObj.renderNow();

$('odometer').html('price');// price variable is calculated anyhow

});

The page shows well.

EDIT 3 Starts

Now I want to render the PostList component on clicking the click_me div .

EDIT 3 Ends

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 jQuery Odomoeter plugin on clicking the click_me div. 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.

Edit2 Starts:

As the plugin is not a node middleware, I cannot require it from inside node. However I can perform the click event (code not shown ) from inside node and run the following code there as well :

$('odometer').html('price');// price variable is calculated anyhow

In this case I include the plugin in the browser with <script /> tag and the browserified bundle.js comes after the plugin script . But the animation is not properly shown. So I take to the client side click event in the custom.js.

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.

Edit2 Ends:

So what is the way to render the PostList React component outside React ?

EDIT 1 The }); was quite mistakenly placed there