Fatal编程技术网
  • node.js/
  • Node.js 从外部渲染组件

Node.js 从外部渲染组件

node.js express reactjs

Node.js 从外部渲染组件,node.js,express,reactjs,react-jsx,react-async,Node.js,Express,Reactjs,React Jsx,React Async,发件人： “在React之外获取React组件实例句柄的唯一方法是存储React.render的返回值。” 我需要在React之外呈现React组件，我将在下面提到它的原因 在我的node.js、expressJS应用程序中，我使用和 在app.js中-应该运行的文件 var url=require('url'); var App=require('./react/App.jsx'); var app = express(); app.get('*',fun

发件人：

“在React之外获取React组件实例句柄的唯一方法是存储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);

          });
   });
在custom.js中：

$('.click_me').click(function(){

PostListRenderObj=PostListRender(products_cart_found);
PostListRenderObj.renderNow();

$('odometer').html('price');// price variable is calculated anyhow

});
这页显示得很好

编辑3开始

现在，我想在单击
click\u me div
时呈现
PostList
组件

编辑3个端点

但是，当我单击
click\u me
元素时，浏览器显示脚本繁忙，控制台显示

ReactJS-ReactMount:根元素已从其原始容器中删除。新容器

并且Firebug日志限制超过了

那么我为什么要从外部单击react.js进行渲染： 我必须在单击
click\me div
时运行jQuery插件。插件不是作为节点中间件开发的，尽管它可以按照中间件的安装方式安装，插件代码库保存在
节点模块
文件夹中

Edit2启动：

由于插件不是节点中间件，我不能从节点内部
要求它。但是，我可以从节点内部执行单击事件（代码未显示），并在其中运行以下代码：


$('odometer').html('price');// price variable is calculated anyhow


在本例中，我使用
标记将插件包含在浏览器中，并且browserified
bundle.js
位于插件脚本之后。但是动画没有正确显示。因此，我在
custom.js
中使用客户端点击事件

如果我不
要求
插件是节点内部的中间件
只需将其包含在browserified JS文件之前的页面中
在React内执行click事件，然后显示里程表动画
没有正确显示

Edit2结束：

那么，在React外部呈现
PostList
React组件的方法是什么


编辑1该
}）被错误地放在那里
我无法理解您的问题描述，但这回答了标题问题：

如何在React之外渲染React组件？


在react内部，您可以调用组件。
很难判断您在这里要求/试图做什么，我认为可能存在一些复制/粘贴问题，因为代码编写时无效。您是否有一个JSFIDLE、GitHub项目或其他实际工作（或不完全工作）的示例？@BrandonTilley，我只在这里粘贴了相关部分。然而，我只需要逻辑。您发现了什么问题？@BrandonTilley，该页面按预期显示在浏览器中。现在，在客户端React页面中单击
div
，我想重新呈现页面。这就是我想要做的。
单击事件将在客户端发生。我没有从React内部触发
单击
的原因是，每次单击时我都必须运行一个jQuery插件，即里程表，如果我从服务器端的React内部触发它，我无法从那里正确运行插件，因为插件不是节点中间件。还有什么要解释的吗？嗨Istiaque。你要求我在我的另一个回答中看看这个。很抱歉，我在这里帮不上忙。我没有使用过React with Node.js或React router。对不起，虽然我在React方面有丰富的经验，但我没有React路由器或React async方面的经验。无论如何，在组件
render
函数（App.jsx）中定义路由似乎有点奇怪。

$('.click_me').click(function(){

PostListRenderObj=PostListRender(products_cart_found);
PostListRenderObj.renderNow();

$('odometer').html('price');// price variable is calculated anyhow

});



$('odometer').html('price');// price variable is calculated anyhow



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})
})