我使用React Starter Kit从NodeJS开始,现在遇到了以下问题:
我的顶级组件有一个props likesCount,它保存相关联的Facebook页面当前拥有的点赞数。该属性应在每次页面加载时设置一次,方法是使用应用访问令牌调用FB API,这就是为什么我不希望在客户端执行此脚本的原因。
为这个数字设置API服务并不是很重要。
如此粗略地讲,一旦加载了一侧,我如何才能引入一个常数(喜欢计数),并在下一个会话期间将其保留为道具(尤其是在客户端?)?
我的App.js(根组件)
类App {
static propTypes = {
path : PropTypes.string.isRequired,
pageLikes : PropTypes.number.isRequired,
viewport : PropTypes.object.isRequired,
onSetTitle : PropTypes.func.isRequired,
onSetMeta : PropTypes.func.isRequired,
onPageNotFound: PropTypes.func.isRequired
};
server.js
server.get( '*', function ( req, res ) {
var data = { description: '' };
var app = new App( {
path : req.path,
pageLikes : currentPageLikes(),
onSetTitle : function ( title ) {
data.title = title;
},
onSetMeta : function ( name, content ) {
data[ name ] = content;
},
onPageNotFound: function () {
res.status( 404 );
}
} );
data.body = React.renderToString( app );
var html = template( data );
res.send( html );
} );
app.js
function run() {
// Render the top-level React component
let props = {
path : path,
onSetTitle : ( title ) => document.title = title,
onSetMeta : setMetaTag,
onPageNotFound: emptyFunction
};
let element = React.createElement( App, props );
React.render( element, document.body );
...
显然我也应该在app.js中设置该属性,但是我不知道该数字可以存储在哪里,以便可以在客户端访问它
好吧,似乎唯一的方法是使用占位符,例如
<script>var likesCount = <%- JSON.stringify(likesCount) %>;<script>
并在server.js中
data.likesCount = likesCount;
导致客户端上的全局可用变量likesCount。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句