来自这里:
"在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