node.js - ssr教程 - react服务端渲染框架



从ReactJS外部渲染组件 (1)

这里

“在React之外获取React组件实例的句柄的唯一方法是存储React.render的返回值。

我需要在React之外渲染一个React组件,以及我将在下面提及的原因。

在我的node.js,expressJS应用程序中,我使用了“react-router-component”“react-async”

在app.js中 - 应该运行的文件,

    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);

          });
   });

在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是所有.jsx文件中的.jsx文件。

在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;

在custom.js中:

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

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

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

});

页面显示很好。

编辑3开始

现在我想通过点击click_me div渲染PostList组件。

编辑3结束

但是当我点击click_me元素时,浏览器显示脚本繁忙,控制台显示

ReactJS - ReactMount:根元素已从其原始容器中移除。 新的容器

Firebug日志限制超过。

那么,为什么我想从外面点击呈现react.js:我必须运行jQuery Odomoeter插件点击click_me div 。 该插件并不是作为节点中间件开发的, 尽管它可以像安装中间件一样安装,并且插件代码库保存在node_modules文件夹中。

Edit2开始:

由于插件不是节点中间件,我不能从节点内部require它。 不过,我可以从节点内执行点击事件(代码未显示),并在其中运行以下代码:

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

在这种情况下,我使用<script />标签在浏览器中包含插件,浏览过的bundle.js位于插件脚本之后。 但动画没有正确显示。 所以我把客户端点击事件中的custom.js

如果我require插件作为节点内的中间件,只是将其包含在浏览过的JS文件之前的页面中,并在React中执行单击事件,则里程表动画将不能正确显示。

编辑2结束:

那么在React之外渲染PostList React组件的方法是什么呢?

编辑1 }); 被错误地放在那里


我不明白你的问题描述,但这回答了题目问题:

你如何呈现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})
})

内部的反应,你可以调用组件。





react-async