从 ReactJS 外部渲染组件答案

【问题标题】：Render a component from outside ReactJS从 ReactJS 外部渲染组件
【发布时间】：2015-03-10 20:52:08
【问题描述】：

来自here：

“在 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 文件中的浏览器化文件。

在 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

});

页面显示良好。

EDIT 3 开始

现在我想在单击 click_me div 时呈现 PostList 组件。

编辑 3 结束

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

ReactJS - ReactMount：根元素已从其原始容器中删除。新容器

并且 Firebug 日志限制超出。

那么为什么我要从外部 react.js 进行点击渲染： 我必须在单击 click_me div 时运行 jQuery Odomoeter 插件。该插件不是作为节点中间件开发的虽然它可以通过安装中间件的方式进行安装，并且插件代码库保存在node_modules 文件夹中。

Edit2 开始：

由于插件不是节点中间件，我不能从节点内部require 它。但是我可以从节点内部执行点击事件（代码未显示）并在那里运行以下代码：

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

在这种情况下，我在浏览器中包含带有<script /> 标记的插件，并且浏览器化的bundle.js 出现在插件脚本之后。但是动画没有正确显示。所以我采取了custom.js中的客户端点击事件。

如果我不 require 插件将成为节点内部的中间件并将其包含在浏览器化的 JS 文件之前的页面中，然后在 React 中执行 click 事件，则里程表动画为没有正确显示。

Edit2 结束：

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

EDIT 1}); 被完全错误地放在那里

【问题讨论】：

很难说出您在这里要求/尝试做什么，而且我认为可能存在一些复制/粘贴问题，因为代码在编写时无效。您是否有 JSFiddle、GitHub 项目或其他一些实际工作（或不太工作）的示例？
@BrandonTilley，我在这里只粘贴了相关部分。但是，我只需要逻辑。你发现了什么问题？
@BrandonTilley，该页面按预期显示在浏览器中。现在，在客户端 React 的页面中单击 div 时，我想重新渲染页面。这就是我想做的。 click 事件将从客户端发生。我为什么不从 React 中触发 click 的原因是我必须在每次点击时运行一个 jQuery 插件，即里程表，如果我从服务器端的 React 中触发它，我无法从因为插件不是节点中间件。还有什么要解释的吗？
嗨伊斯蒂亚克。您曾要求我在我的其他 React 答案之一中查看此问题。很抱歉，但我无法在这里提供帮助。我没有将 React 与 Node.js 或 React-router 一起使用。对不起。
虽然我对 React 有丰富的经验，但我对 react-router 或 react-async 没有任何经验。无论如何，您定义路由 inside 组件render 函数（App.jsx）似乎有点奇怪。

标签： node.js express reactjs react-jsx react-async

【解决方案1】：

我无法理解您的问题描述，但这回答了标题问题：

如何在 react 之外渲染 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 内部你可以调用组件。

【讨论】：