Ist*_*med 9 node.js express reactjs react-jsx react-async
从这里:
"在React之外获取React Component实例句柄的唯一方法是存储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开始
现在我想PostList在点击时渲染组件click_me div.
编辑3结束
但是当我点击click_me元素时,浏览器显示脚本忙,控制台显示
ReactJS - ReactMount:Root元素已从其原始容器中删除.新容器
并且Firebug日志限制超过了.
那么为什么我要在外部点击react.js进行渲染:
我必须在点击时运行jQuery Odomoeter插件click_me div.该插件不是作为节点中间件开发的,尽管它可以像安装中间件的方式安装,插件代码库也保存在node_modules文件夹中.
Edit2开始:
由于插件不是节点中间件,我不能require从内部节点.但是,我可以从内部节点执行click事件(代码未显示),并在那里运行以下代码:
$('odometer').html('price');// price variable is calculated anyhow
在这种情况下,我将浏览器中的插件包含在<script />标签中,并在浏览器bundle.js脚本之后添加浏览器.但是动画没有正确显示.所以我在客户端点击事件custom.js.
如果我不require将插件作为来自内部节点的中间件并且只是在浏览器化的JS文件之前将其包含在页面中并在React中执行单击事件,那么里程表动画就没有正确显示.
Edit2结束:
那么在PostListReact之外渲染React组件的方法是什么？
编辑1将});是相当错误地放在那里
我无法理解您的问题描述，但这回答了标题问题：
如何在 React 之外渲染 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})
})
在 React 内部你可以直接调用组件。
| 归档时间： |
|
| 查看次数： |
6842 次 |
| 最近记录： |