0

I'm trying to build my app with React and Node (Isomorphic Rendering Architecture). I found on github example project but i have problem. I would like to develop my project client and server together, that the same Component can gets data/actions whataever from client nad server simultaneously. For example:

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

You can see that, Component gets props from client and server together. How i can do this? I tryed 3 github projects but always i can't implement it. I dont know why. of course it's working when i render Component only by server or only by client but it's not working together.

For example when I render Component by server i can't make any actions specific for client (onclick alerting etc.) . So that's why it's important for me. Rendering some data from server and makes some client actions. But together, still on the same Component.

I'm sorry for my poor english!

4

2 回答 2

0

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

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

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

于 2016-01-04T12:23:15.880 回答
0

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

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

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

这不是很有效的 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，但在提供页面之前，它会预先填充数据，这些数据稍后将在浏览器上更新（替换或添加到）。

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

于 2016-01-03T22:11:29.427 回答