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

Question

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

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

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

例如，当我通过服务器呈现组件时，我无法对客户端执行任何特定操作（点击警报等）。所以这就是为什么它对我很重要。从服务器呈现一些数据并进行一些客户端操作。但是放在一起，还是在同一个组件上。

对不起我的英语不好！

Answer 1

Jan，使用 React 不可能做到这一点。

它们不起作用 "at the same time"。
server-side React 代码通过将 HTML 页面构建为 text-string 并将 HTML 文本提供给客户端来工作。
浏览器加载页面后，浏览器中的 React 代码将自身附加到页面上的 React 代码（因为服务器打印出所有组件的 ID，以便浏览器附加到）。

然后，目标是将数据提供给组件，而不是期望同时访问浏览器和服务器。这样，你可以使用server-side代码为组件获取数据，你可以使用client-side代码为组件获取数据，组件不会关心。

这不是很有效的 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 } />;
  }
}

这里的重要部分不是 Server 或 Browser 元素（正如我所说，这不会真正起作用），而是 <Articles /> 元素不需要服务器或浏览器；它需要一个文章列表。

这种方法的好处是，服务器构建 HTML，但在提供页面之前，它 pre-filled 包含数据，稍后将更新（替换或添加）到）在浏览器上。

希望对您有所帮助；如果没有，请离开，我会尝试添加到答案中。

Answer 2

@Norguard 感谢您的全面回答。我想拥有你的答案。我知道您的示例代码对 React/JS 无效，因为我们必须在模型区域构建数据库操作。但是有一件事让我很困惑。我们正在发送 API 和我们的 '/articles' 并从中获取数据。好的，很酷，但这仍然是 public 数据。我想知道私人数据。如何使用 React Isomorphic 获取特定数据或服务器 if/else 条件来构建更好的应用程序。

如果我们使用 client-side 模板语言（如 ejs），那将非常容易。我们正在为模板语言的特定标签构建我们的 .html 文件和注入服务器方法（或其他）。如何在 React 服务器中做同样的事情？我无法想象这会使用组件和服务器。

我想我理解你向我展示的想法，但需要时间使用 React 高效地构建同构应用程序。

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

React isomorphic - issue with simultaneous client / server actions

isomorphism

node.js

reactjs