React Starter Kit:为客户端引入常量

间隔视觉

我使用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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React-starter-kit的构建系统

来自分类Dev

React Starter Kit中的Ajax调用

来自分类Dev

#react-starter-kit React onClick无法在页面上触发

来自分类Dev

react-starter-kit中的require('template.jade')

来自分类Dev

MIT react-starter-kit的main.js 404错误

来自分类Dev

带有 Webpack 的 React-Bootstrap 无法从 react-starter-kit 工作

来自分类Dev

使用React Starter Kit在Select上打开一个链接

来自分类Dev

Susy 与 Google Web Starter Kit

来自分类Dev

客户端渲染React

来自分类Dev

React Starter Kit和Material UI:应该在muiTheme上下文中提供userAgent以进行服务器端渲染

来自分类Dev

客户端React JS发布请求

来自分类Dev

如何在Express,React,Webpack,SSR应用程序中的客户端和服务器之间共享常量

来自分类Dev

React Starter模板不呈现任何内容

来自分类Dev

Facebook React.js ::为客户端渲染传递数据

来自分类Dev

尝试托管Polymer Starter Kit时的GitHub Pages 404

来自分类Dev

在web-starter-kit中使用sass源映射

来自分类Dev

在web-starter-kit中使用sass源映射

来自分类Dev

使用带有Web Starter Kit的BrowserSync出现错误

来自分类Dev

尝试托管Polymer Starter Kit时的GitHub Pages 404

来自分类Dev

用PHP生成React组件,然后在客户端渲染

来自分类Dev

在客户端React Router应用中使用HistoryLocation

来自分类Dev

react-dom / server是否在客户端工作?

来自分类Dev

变异后React Apollo更新客户端缓存

来自分类Dev

在React中管理共享/单个客户端对象

来自分类Dev

在Gatsby React App中内插env vars客户端

来自分类Dev

前端的用户角色/权限-React / GraphQL / Apollo客户端

来自分类Dev

Firebase,React:如何在客户端显示http错误?

来自分类Dev

如何基于角色权限生成React客户端库?

来自分类Dev

构建客户端 API 以在 React 项目中集成

Related 相关文章

  1. 1

    React-starter-kit的构建系统

  2. 2

    React Starter Kit中的Ajax调用

  3. 3

    #react-starter-kit React onClick无法在页面上触发

  4. 4

    react-starter-kit中的require('template.jade')

  5. 5

    MIT react-starter-kit的main.js 404错误

  6. 6

    带有 Webpack 的 React-Bootstrap 无法从 react-starter-kit 工作

  7. 7

    使用React Starter Kit在Select上打开一个链接

  8. 8

    Susy 与 Google Web Starter Kit

  9. 9

    客户端渲染React

  10. 10

    React Starter Kit和Material UI:应该在muiTheme上下文中提供userAgent以进行服务器端渲染

  11. 11

    客户端React JS发布请求

  12. 12

    如何在Express,React,Webpack,SSR应用程序中的客户端和服务器之间共享常量

  13. 13

    React Starter模板不呈现任何内容

  14. 14

    Facebook React.js ::为客户端渲染传递数据

  15. 15

    尝试托管Polymer Starter Kit时的GitHub Pages 404

  16. 16

    在web-starter-kit中使用sass源映射

  17. 17

    在web-starter-kit中使用sass源映射

  18. 18

    使用带有Web Starter Kit的BrowserSync出现错误

  19. 19

    尝试托管Polymer Starter Kit时的GitHub Pages 404

  20. 20

    用PHP生成React组件,然后在客户端渲染

  21. 21

    在客户端React Router应用中使用HistoryLocation

  22. 22

    react-dom / server是否在客户端工作?

  23. 23

    变异后React Apollo更新客户端缓存

  24. 24

    在React中管理共享/单个客户端对象

  25. 25

    在Gatsby React App中内插env vars客户端

  26. 26

    前端的用户角色/权限-React / GraphQL / Apollo客户端

  27. 27

    Firebase,React:如何在客户端显示http错误?

  28. 28

    如何基于角色权限生成React客户端库?

  29. 29

    构建客户端 API 以在 React 项目中集成

热门标签

归档