Как передать данные с сервера express server для представления react?

у меня есть простой экспресс-сервер с подключением к базе данных orientdb. Мне нужно передать информацию из express в react views. Например, в express у меня есть:

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

Итак, в этом примере мне нужно иметь в моем компоненте индекса реакции posts переменная для установки состояния компонента. (Я использую реагируют только в интерфейсе, а не на стороне сервера)

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

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

как я могу получить сообщения в react от express?

я обнаружил, что, возможно, я могу сделать запрос ajax от react, но я думаю, что это не лучший способ.

Если мне нужно получить эти сообщения в режиме реального времени, используя сокет.io например, каковы различия?

PD: в express у меня есть возможность использовать какой-то шаблонный движок, такой как руль или Хоган. Может ли этот шаблон помочь в этом разделе?

спасибо!!!

6
express node.js reactjs socket.io

1 ответов

Я думаю, что ваш лучший вариант-действительно сделать какой-то сетевой запрос от клиента. Если вы хотите сохранить приложение простым и не хотите библиотеку управления состоянием (например, Redux), вы можете сделать что-то вроде

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>
    );
  }
}

в своем response должно быть представление JSON коллекции сообщений.

отметить render метод и доступ к posts.

подробнее о Fetch API см. MDN (обратите внимание, что вы будете для этого нужен polyfill для старых браузеров).

EDIT: для сокета.io я бы сохранил экземпляр этого где-нибудь и передал его как опору компоненту. Затем вы можете сделать что-то вроде

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

серверная часть аналогична, см., например,гнездо.пример чата io.

6