从ReactJS外部渲染组件
从这里 ：
“在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 。 该插件并不是作为节点中间件开发的， 尽pipe它可以像安装中间件一样安装，并且插件代码库保存在node_modules文件夹中。
Edit2开始：
由于插件不是节点中间件，我不能从节点内部require它。 不过，我可以从节点内执行点击事件（代码未显示），并在其中运行以下代码：
$('odometer').html('price');// price variable is calculated anyhow
在这种情况下，我使用<script />标签在浏览器中包含插件，浏览过的bundle.js位于插件脚本之后。 但animation没有正确显示。 所以我把客户端点击事件中的custom.js 。
如果我 require插件作为节点内的中间件，只是将其包含在浏览过的JS文件之前的页面中，并在React中执行单击事件，则里程表animation将不能正确显示。
编辑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}) })
在内部的反应，你可以调用组件。