Question

来自here：

＆＃34;在React之外获取React Component实例句柄的唯一方法是存储React.render的返回值。＆＃34;

我需要在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

});

页面显示良好。

编辑3开始

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

编辑3结束

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

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

Firebug日志限制超过。

那么我为什么要在外面反复点击react.js： 我必须在点击click_me div时运行jQuery Odomoeter插件。该插件不是作为节点中间件开发的虽然它可以像安装中间件的方式安装，插件代码库保存在node_modules文件夹中。

Edit2开始：

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

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

在这种情况下，我将浏览器中的插件包含<script />标记，并在浏览器脚本之后添加浏览器bundle.js。但是动画没有正确显示。所以我在custom.js。

中接受客户端点击事件

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

Edit2结束：

那么在React之外呈现PostList React组件的方法是什么？

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

Answer 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})
})

在反应中你可以调用组件。

从ReactJS外部渲染组件

1 个答案: