从ReactJS外部渲染组件 [英] Render a component from outside ReactJS
问题描述
从此处：
获取React之外的React Component实例句柄的唯一方法是存放React.render的返回值。
我需要在React之外渲染一个React组件，其原因我将在下面提到。
在我的node.js中，expressJS应用程序，我正在使用反应路由器组件和 '反应-异步' 。
在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>
<位置路径= {this .props.path}>
<位置路径=/处理程序= {PostList} />
<位置路径=/ admin处理程序= {管理} >
< / Locations>
< script type =text / javascriptsrc =/ scripts / reactions / bundle.js>< /脚本>
< script type =text / javascriptsrc =/ scripts / custom.js>< / script>
< / body>
$ b.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 。身体}）;
}）;
}
setTopmostParentState：function（items_show）{
this.setState（{
items_show：items_show
}）;
}，
render：function（）{
return（
< div className =postList id =postList>
** //事情进入这里**
< div className =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中：
<$ p $点击（function（）{
PostListRenderObj = PostListRender（products_cart_found）;
PostListRenderObj.renderNow（）;
$（'odometer'）。html（'price'）; //价格变量无论如何计算
}）;
该页显示得很好。
strong>编辑3开始
现在，我想在 PostList 组件上点击 click_me div 。
编辑3结束
但是当我点击 click_me 元素时，浏览器显示脚本忙，控制台显示
ReactJS - ReactMount：根元素已从原始容器中删除。新容器
Firebug日志限制超出了
所以为什么我想在点击之外的javascript.java：
我必须运行jQuery Odomoeter 插件，点击 click_me div 。该插件不是开发为节点中间件，尽管可以安装中间件的方式，插件代码库保存在 node_modules 文件夹中。
Edit2开始：
由于插件不是节点中间件，不能从$节点内的要求。但是，我可以从内部节点执行点击事件（代码未显示），并在其中运行以下代码：
$（ 'odometer'）。html（'price'）; //价格变量是否计算
在这个情况我将浏览器中的插件包含在< script /> 标签中，并且浏览器 bundle.js 插件脚本。但动画未正确显示。所以我采取客户端点击事件在 custom.js 。
如果我不 要求插件是从节点
内的中间件，只是将其包含在浏览器JS文件之前的页面中，
在React中执行点击事件，那么里程表动画是
未正确显示。
Edit2 Ends：
那么渲染 PostList React之外的组件的反应方式是什么？
编辑1 }）; 被错误地放在那里
我无法理解你的问题描述，但这回答了标题问题：
MyComponent = require（'MyComponent'）
element =的document.getElementById（ 'postList'）;
renderedComp = ReactDOM.render（MyComponent，{... someProps}，元素）;
// => render返回组件实例。
$（document）.on（'something，function（）{
renderedComp.setState（{thingClicked：true}）
}）
内部的反应你可以调用组件。
From here :
"The only way to get a handle to a React Component instance outside of React is by storing the return value of React.render."
I need to render a React component outside React and the reason for it I'm going to mention below.
In my node.js, expressJS app, I am using 'react-router-component' and 'react-async'.
In app.js -the file which is supposed to be run ,
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);
});
});
In 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 is the browserified file from all the .jsx files.
In 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;
In custom.js:
$('.click_me').click(function(){
PostListRenderObj=PostListRender(products_cart_found);
PostListRenderObj.renderNow();
$('odometer').html('price');// price variable is calculated anyhow
});
The page shows well.
EDIT 3 Starts
Now I want to render the PostList component on clicking the click_me div .
EDIT 3 Ends
But when I click on the click_me element, the browser shows script busy, console shows
ReactJS - ReactMount: Root element has been removed from its original container. New container
And the Firebug log limit exceeds.
So why I want to render on click from outside react.js:
I have to run the jQuery Odomoeter plugin on clicking the click_me div. The plugin was not developed as a node middleware although it can be installed the way a middleware is installed and the plugin codebase is saved inside node_modules folder.
Edit2 Starts:
As the plugin is not a node middleware, I cannot require it from inside node. However I can perform the click event (code not shown ) from inside node and run the following code there as well :
$('odometer').html('price');// price variable is calculated anyhow
In this case I include the plugin in the browser with <script /> tag and the browserified bundle.js comes after the plugin script . But the animation is not properly shown. So I take to the client side click event in the custom.js.
If I do not require the plugin to be a middleware from inside node
and just include it in the page before the browserified JS file and
perform the click event inside React, then the odometer animation is
not properly shown.
Edit2 Ends:
So what is the way to render the PostList React component outside React ?
EDIT 1 The }); was quite mistakenly placed there
I cannot understand your question description, but this answers the title question:
How you render React components outside of 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})
})
Inside of react you can just call the component.
这篇关于从ReactJS外部渲染组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
