Javascript 如何在React组件中使用呈现的json数据_Javascript_Node.js_Reactjs_Express

Javascript 如何在React组件中使用呈现的json数据

javascript node.js reactjs express

Javascript 如何在React组件中使用呈现的json数据,javascript,node.js,reactjs,express,Javascript,Node.js,Reactjs,Express,我在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>

我在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>


我的头衔
加载和hellip；

正在呈现的页面是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”导入React；
从“react hot loader”导入{AppContainer}；
从'react redux'导入{Provider}；
从'react dom'导入{render}；
导入'bootstrap/dist/css/bootstrap.min.css'；
导入“/css/msha.scss”；
从“./Store”导入存储；
从“./components/TemplateContainer”导入TemplateContainer；
常量renderApp=（组件）=>{
渲染(
,
document.querySelector（“#react app”），
);
};
renderApp（模板容器）；
if（模块和模块热）{
module.hot.accept（'./组件/模板容器'，（）=>{
renderApp（模板容器）；
});
}

正在呈现的页面包含react组件。如何在react组件中访问此数据？

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

<!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>


我的头衔
加载和hellip；
window.data=；

您使用什么模板引擎？并显示您的

索引

视图代码。我刚刚添加了我的index.ejs。我想说最简单的方法是创建一个以json形式返回数据的快速路由，而不是尝试通过渲染引擎传递数据。然后在react应用程序中，在加载时对其进行ajax调用