0

我正在尝试构建一个符合最佳实践的同构 React 应用程序。我目前只是想为服务器找到一个好的系统。以下是我的一些要求：

要求

  • 我想使用反应路由器
  • 我试图避免使用通量架构，因为它对我的简单应用程序来说太过分了
  • 我希望我的 React 组件是纯的，所以它们不应该将模型数据存储在它们的内部状态中
  • React 组件也不应该自己获取它们需要的数据，这些数据应该通过props
  • 如果一个组件需要异步加载数据，那应该在渲染之前发生在服务器上

简单的示例应用程序

我做了一个小示例应用程序，应该说明我的问题/困惑：https ://github.com/maximilianschmitt/ipman

基本上，组件树如下所示：

RouteHandler
  App
    RouteHandler
      Home
      Ip

路由.js

'use strict';

const Router = require('react-router');
const App = require('./components/app');
const Home = require('./components/home');
const Ip = require('./components/ip');
const Route = Router.Route;

const routes = (
  <Route handler={App}>
    <Route name="home" path="/" handler={Home} />
    <Route name="ip" path="/ip" handler={Ip} />
  </Route>
);

module.exports = routes;

组件/ip.js

class Ip extends React.Component {
  render() {
    return <div>Your ip is: {this.props.ip || 'undefined'}</div>;
  }
}

我的问题/任务是：

  • 如果我导航到，我希望服务器从http://ip.jsontest.com/ip请求自己的 IP 地址，以某种方式将其传递给组件，然后将所有内容呈现为字符串，以供客户端查看为 HTML。Ip
  • 我想我想避免在组件内部发出 HTTP 请求，而是想通过必要的信息传递props

我知道诸如alt.js和其他同构通量实现之类的库通过商店的概念解决了这个问题，但我想知道这是否有点矫枉过正。

有没有一种简单的方法来添加所需的功能？

4

1 回答 1

0

根据react-router 的这篇文章，我得到了一些看起来不是那么糟糕的解决方案。你可以在这里找到结果：https ://github.com/maximilianschmitt/server-side-react

于 2015-07-19T19:37:31.517 回答