Question

我使用React Starter Kit从NodeJS开始，现在我遇到了以下问题：

我的顶级组件有一个道具 likesCount ，它保存了相关脸谱页面当前拥有的喜欢的数量。这个属性应该在每个页面加载时设置一次，通过某种方法使用app访问令牌调用FB API，这就是为什么我不希望在客户端执行此脚本。

为这个号码设置API服务并不是很重要。

粗略地说，如果一方加载，我怎么能引入一个常量（喜欢计数）并在下一个会话期间保持它作为道具（特别是在客户端？）

我的App.js（根组件）

class 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中设置属性，但我不知道我可以在哪里存储这个号码，以便我可以在客户端访问它

Answer 1

好吧，似乎唯一的方法是使用占位符，例如

<script>var likesCount =  <%- JSON.stringify(likesCount) %>;<script>

并在server.js

中

data.likesCount = likesCount;

在客户端上生成全局可用的变量likesCount。

React Starter Kit：为客户端

1 个答案: