如何从快速服务器传递数据以响应视图? [英] How can I pass data from express server to react views?

问题描述

我有一个连接到 orientdb 数据库的简单快速服务器.我需要从 express 传递信息来响应视图.例如，在快递我有:

router.get('/', function(req, res, next) {Vertex.getFromClass('Post').then(功能(帖子){res.render('index', { title: 'express' });});});

所以，在这个例子中，我需要在我的反应索引组件中使用 posts 变量来设置组件的状态.(我只在前端使用 react，不在服务器端)

class IndexPage 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {帖子:[]};}使成为() {返回 (<div><帖子帖子={帖子}/>

);}}

我怎样才能从 express 中获取帖子的反应?

我发现也许我可以从 react 中执行 ajax 请求，但我认为那不是最好的方法.

如果我需要实时获取那些帖子，例如使用 socket.io，有什么区别?

PD:在 express 我有可能使用一些模板引擎，比如把手或 hogan.这个模板引擎可以帮助解决这个主题吗?

谢谢！！！

解决方案

我认为最好的选择是确实从客户端发出某种网络请求.如果您的目标是保持应用程序简单并且不想要状态管理库(例如 Redux)，您可以执行类似

class IndexPage 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {帖子:[]};}componentDidMount() {fetch('/')//或者任何你想要的 URL.then((响应) => response.json()).then((posts) => this.setState({帖子:帖子，});}使成为() {返回 (<div><帖子posts={this.state.posts}/>

);}}

在您的 response 中应该有帖子集合的 JSON 表示.

还要注意 render 方法和访问 posts.

有关 Fetch API 的更多信息，请参阅 MDN (另请注意，您需要为旧版浏览器添加 polyfill.

对于 socket.io，我会将它的实例存储在某处并将其作为 prop 传递给组件.然后你可以做类似的事情

class IndexPage 扩展 React.Component {...componentDidMount() {this.props.socket.on('postReceived', this.handleNewPost);}handleNewPost = (post) =>{this.setState({帖子: [...this.state.posts,邮政，],});}...}

服务端部分类似，参见Socket.io聊天示例.

I have a simple express server with a connection to a orientdb database. I need to pass information from express to react views. For example, in express I have:

router.get('/', function(req, res, next) {
  Vertex.getFromClass('Post').then(
    function (posts) {
      res.render('index', { title: 'express' });
    }
  );
});

So, in this example, I need to have in my react index component, the posts variable to set the state of the componenent. (I'm using react only in the frontend, not server-side)

class IndexPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }

  render() {
    return (
      <div>
        <Posts posts={posts} />
      </div>
    );
  }
}

How can I get the posts in react from express?

I found that maybe I can do an ajax request from react, but I think that that isn't the best way.

If I need to get that posts in a real time way, using socket.io for example, what are the differences?

PD: In express I have the possibility to use some template engine like handlebars or hogan. Can this template engines help in this topic?

Thanks!!!

解决方案

I think your best option is to indeed make some kind of network request from the client. If you aim to keep the app simple and do not want a State Management library (e.g. Redux), you could do something like

class IndexPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }

  componentDidMount() {
    fetch('/') // or whatever URL you want
      .then((response) => response.json())
      .then((posts) => this.setState({
        posts: posts,
      });
  }

  render() {
    return (
      <div>
        <Posts posts={this.state.posts} />
      </div>
    );
  }
}

In your response there should be a JSON representation of the posts collection.

Also note the render method and accessing the posts.

For more on Fetch API see MDN (please also note that you will need a polyfill for older browsers for it).

EDIT: For socket.io I'd store the instance of it somewhere and pass it as a prop to the component. Then you can do something like

class IndexPage extends React.Component {
  ...
  componentDidMount() {
    this.props.socket.on('postReceived', this.handleNewPost);
  }
  handleNewPost = (post) => {
    this.setState({
      posts: [
        ...this.state.posts,
        post,
      ],
    });
  }
  ...
}

The server-side part is similar, see for example Socket.io Chat example.

这篇关于如何从快速服务器传递数据以响应视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！