从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}) })
在内部的反应,你可以调用组件。