如何在 React 组件中使用渲染的 json 数据答案

【问题标题】：How to use rendered json data in React component如何在 React 组件中使用渲染的 json 数据
【发布时间】：2017-08-08 21:45:15
【问题描述】：

我在 get 上渲染一个页面并用它传递一个 json 对象，如下所示：

/* GET home page. */
router.get('/', (req, res, next) => {
  const message = req.session.message;
  res.render('index', { data: message });
});

这是我的 index.ejs 视图：

<!DOCTYPE html>
<html>
  <head>
    <title>My Title</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <div id='react-app'> Loading &hellip;</div>
  </body>
  <script src="/javascripts/build.js"></script>
</html>

正在呈现的页面是 index.js：

import React from 'react';

import { AppContainer } from 'react-hot-loader';
import { Provider } from 'react-redux';
import { render } from 'react-dom';

import 'bootstrap/dist/css/bootstrap.min.css';
import './css/msha.scss';

import Store from './store';
import TemplateContainer from './components/TemplateContainer';

const renderApp = (Component) => {
  render(
    <AppContainer>
      <Provider store={Store}>
        <Component />
      </Provider>
    </AppContainer>,
    document.querySelector('#react-app'),
  );
};

renderApp(TemplateContainer);

if (module && module.hot) {
  module.hot.accept('./components/TemplateContainer', () => {
    renderApp(TemplateContainer);
  });
}

正在呈现的页面包含一个反应组件。如何在 react 组件中访问这些数据？

【问题讨论】：

你使用什么模板引擎？并显示您的index 查看代码。
我刚刚添加了我的 index.ejs。
我想说最简单的方法是创建一个以 json 格式返回数据的快速路由，而不是尝试通过渲染引擎传递它。然后在你的反应应用程序加载时对其进行 ajax 调用

标签： javascript node.js reactjs express

【解决方案1】：

其中一种方法是将对象添加到全局范围并从组件中使用它：

<!DOCTYPE html>
<html>
  <head>
    <title>My Title</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <div id='react-app'> Loading &hellip;</div>
    <script>
      window.data = <%- JSON.stringify(data) %>;
    </script>
    <script src="/javascripts/build.js"></script>
  </body>
</html>

【讨论】：