Question

我正在尝试使用React和Node（同构渲染架构）构建我的应用程序。我在github上找到了示例项目，但我遇到了问题。我想一起开发我的项目客户端和服务器，同一个组件可以同时从客户端nad服务器获取数据/操作。例如：

var Component = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        {this.props.client}
        {this.props.server}
      </div>
    );
  }
});

你可以看到，Component从客户端和服务器一起获取道具。我怎么能这样做？我尝试了3个github项目但总是无法实现它。我不知道为什么。当然，当我仅通过服务器或仅由客户端渲染组件时它才起作用，但它不能一起工作。

例如，当我按服务器呈现Component时，我无法对客户端进行任何特定操作（onclick警报等）。所以这就是为什么它对我来说很重要。从服务器渲染一些数据并进行一些客户端操作。但是在一起，仍然在同一个组件上。

我很抱歉我的英语很差！

Answer 1

Jan，使用React无法做到这一点。

他们不能同时工作＆＃34; 服务器端React代码的工作原理是将HTML页面构建为文本字符串，并将HTML文本提供给客户端浏览器加载页面后，浏览器中的React代码会将自身附加到页面上的React代码中（因为服务器打印出所有组件的ID，以供浏览器附加到之后）。 / p>

然后，目标是将数据提供给组件，而不是期望同时访问浏览器和服务器。这样，您可以使用服务器端代码来获取组件的数据，并且可以使用客户端代码来获取组件的数据，并且组件不会关心。

这不是很有效的React，或者正确的做JS的方法，一般但看看：

class ServerElement {
  render ( ) {
    // sync calls should rarely ever (ideally never, other than booting up) be used
    var articles = db.syncGetArticles();

    return <Articles articles={ articles } />;
  }
}

class BrowserElement {
  render ( ) {
    // isn't real, and should never be used even if it was
    var articles = ajax.sync("GET", "/articles");

    return <Articles articles={ articles } />;
  }
}

这里的重要部分不是服务器或浏览器元素（就像我说的那样，它确实不会起作用），而是<Articles />元素不期望服务器或浏览器;它期待一份文章清单。

这种方法的好处是，服务器构建HTML，但在提供页面之前，它预先填充了数据，稍后将更新（替换或添加）到浏览器。

我希望有所帮助;如果它没有，请求离开，我会尝试添加答案。

Answer 2

@Norguard感谢您的全面解答。我想拥有你的答案。我知道你的示例代码对React / JS无效，因为我们必须在模型区域中构建db动作。但有一件事困扰着我。我们正在使用我们的＆＃39; / articles＆＃39;并从中获取数据。好吧，很酷，但这仍然是公共数据。我想知道私人数据。如何使用React Isomorphic获取特定数据或服务器if / else条件以构建更好的应用程序。

如果我们使用客户端模板语言（如ejs），那很容易。我们正在为模板语言构建我们的.html文件和注入服务器方法（或其他）到特定标签。在React服务器中如何做到这一点？我无法使用组件和服务器来想象这一点。

我认为我理解你向我展示的想法但是需要时间来使用React有效地构建Isomorphic应用程序。

React isomorphic - 同时发生客户端/服务器操作的问题

2 个答案: