使用 React 和 ejs 一起吗？

Question

我有一个前端应用，使用React状态来适应用户操作。然而，我的前端React也需要显示和允许操作服务器端的数据。目前我的视图引擎是EJS，我正在使用它来展示数据。举个例子：

  return (<div class="col-md-6 col-sm-6 col-xs-7">
    <ul>
      <li><span class="point">Name:</span> <%= user.profile.name %> </li>
      <li><span class="point">Email:</span> <%= user.email %> </li>
    </ul>
  </div>); 

经过我的确认，我发现无法将这些ejs的<%=标记与React混合使用。这使得操作数据成为一项挑战。除非我使用jQuery重新设计用户界面，否则我不知道该如何继续。

我查看了这篇React文档以传递数据，但在测试后，结果并不允许我进行跨域调用，而我的MongoDB存储在MongoLab上。因此，我只能使用EJS来调用我的数据。

由于使用React和EJS存在一定限制，我对如何实现一个UI工具（例如React）以及服务器端数据感到困惑。

- Jason Chen

---

你有 Node.js 后端吗？ - Igorsvee

我已经设置好了一个 Express 环境。 - Jason Chen

这没有意义。React已经通过JSX {...}符号执行了模板操作，为什么你还需要在其上面进行模板操作？请花半小时时间阅读https://facebook.github.io/react/docs/tutorial.html，这是值得您花费时间的，以便您了解“客户端与服务器”不是React应关心的区别。您让React构建用户界面，而不是其他模板引擎。 - Mike 'Pomax' Kamermans

如果你想在一个已经使用EJS（React用作卖点的框架）的大型项目中逐步添加React，这样做是有道理的。 - Stephen Shank

没有人说过如何在没有EJS的情况下正确使用React，我正在尝试弄清楚。我猜想你需要重新调整客户端的服务器调用，以便客户端获取React模板信息而不是整个呈现的页面，对吗？ - Andrew P.

Answer 1

在Express中：

res.render('view', {user: myUser});

在应用程序的js捆绑包之前的EJS中:

<script type='text/javascript'>
  var userFromServer =<%-JSON.stringify(user)%>
</script>

在你的React代码中使用userFromServer。

- Igorsvee

Answer 2

如果您正在使用Express，那么您的入口点显然是类似于app.ejs的东西； 要拥有一个React组件，您需要将扩展名更改为app.jsx作为入口点，这对我有效...

- NandaSagar

Answer 3

你可以使用 react 和 babel.js 而不需要 webpack。但这可能不是一个好的解决方案，但它能够工作。

<script src="//unpkg.com/react@16/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- for imported scripts -->
<script src="//unpkg.com/@babel/standalone/babel.min.js"></script>

<div id="app"></div>
<script type="text/babel">
 const { React, ReactDOM } = window;
 function App(){
   return (<div class="col-md-6 col-sm-6 col-xs-7">
    <ul>
      <li><span class="point">Name:</span> <%= user.profile.name %> </li>
      <li><span class="point">Email:</span> <%= user.email %> </li>
    </ul>
  </div>)
 }
 ReactDOM.render(<App/>, document.getElementById('app'));
</script>

- perona chan