Node.js 反应同构-客户端/服务器同时操作时出现问题

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

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

var Component=React.createClass({
render:function（）{
返回(
{this.props.client}
{this.props.server}
);
}
});

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

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

---

我很抱歉我的英语不好

简，用React是不可能做到的

它们不会“同时”工作。
服务器端React代码将HTML页面构建为文本字符串，并将HTML文本提供给客户端。
浏览器加载页面后，浏览器中的React代码将自身附加到放置在页面上的React代码（因为服务器打印所有组件的ID，以便浏览器在加载后附加到）

因此，我们的目标是向组件提供数据，而不是期望同时访问浏览器和服务器。 这样，您可以使用服务器端代码来获取组件的数据，也可以使用客户端代码来获取组件的数据，而组件不会在意

一般来说，这不是非常有效的反应，也不是正确的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 } />;
  }
}

class服务器元素{
渲染（）{
//应该很少使用同步调用（理想情况下，除了启动之外，永远不要使用）
var articles=db.syncGetArticles（）；
返回；
}
}
类浏览器元素{
渲染（）{
//不是真的，即使是真的也不应该使用
var articles=ajax.sync（“GET”，“/articles”）；
返回；
}
}

这里重要的部分不是服务器或浏览器元素（如我所说，这实际上不起作用），而是

元素不需要服务器或浏览器；它正在等待一个文章列表

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

---

我希望这有帮助；如果没有，请直接提问，我会尝试补充答案。

@Norguard谢谢你的全面回答。我想承认你的答案。我知道您的示例代码对React/JS无效，因为我们必须在模型区域中构建db操作。但有一件事让我困惑。我们正在发送带有“/文章”的API，并从中获取数据。好吧，这很酷，但这仍然是公共数据。我想知道私人数据。如何使用React同构获取特定数据或服务器if/else条件以构建更好的应用程序

如果我们使用客户端模板语言（比如ejs），这很容易。我们正在为模板语言的特定标记构建.html文件和注入服务器方法（或其他方法）。如何在React服务器中执行相同的操作？我无法想象使用组件和服务器会出现这种情况

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