Как передать данные с сервера 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 у меня есть возможность использовать какой-то шаблонный движок, такой как руль или Хоган. Может ли этот шаблон помочь в этом разделе?
спасибо!!!
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.