来自这里：
"在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
});
页面显示良好。
编辑3开始
现在我想在点击 click_me div 后呈现 PostList 组件。
编辑3结束
但当我点击 click_me 元素时，浏览器显示脚本繁忙，控制台显示：
ReactJS - ReactMount: Root element has been removed from its original container. New container
并且 Firebug 日志超出限制。
因此，为什么我想在 react.js 外部进行单击呈现：
我必须在单击 click_me div 时运行 jQuery Odomoeter 插件。该插件不是作为 node 中间件开发的，尽管可以按照中间件的方式安装插件，并且插件代码库保存在 node_modules 文件夹中。
编辑2开始：
由于该插件不是 node 中间件，因此我无法从 node 内部 require 它。但是，我可以从 node 内部执行点击事件（未显示代码），以及运行以下代码：
$('odometer').html('price');// price variable is calculated anyhow
<script />标签将插件包含在浏览器中，并且browserified bundle.js 在插件脚本之后。但是动画没有正确显示。因此，我在custom.js中采用客户端单击事件。那么如何在React之外呈现
PostList React组件？编辑1：这里错误地放置了
});。
div时，我希望重新渲染页面。这就是我想做的全部内容。click事件将在客户端发生。我不从React内部触发click的原因是，我必须在每次单击时运行名为odometer的jQuery插件，如果我从服务端React内部触发它，我无法从那里正确地运行插件，因为该插件不是节点中间件。还有什么需要解释的吗？ - Istiaque Ahmedrender函数（App.jsx）内部似乎有点奇怪。 - Hulvej