Как реагировать на подписку данных в компоненте? - PullRequest
0 голосов
/ 15 мая 2019

Я настраиваю новое приложение реакции метеора, которое подписывает новые данные с сервера. Я хочу привязать данные только к компоненту главной страницы. У меня следующий код главной страницы компонента.

    import React from 'react';
    import ReactDOM from 'react-dom';
    import RealTime from '../../../lib/client/RealTime';
    // TrackerReact is imported (default) with Meteor 1.3 new module system
    import TrackerReact from 'meteor/ultimatejs:tracker-react';
    import Game from '../pages/components/game';
    // > React.Component is simply wrapped with TrackerReact
    class MainPage extends TrackerReact(React.Component) {

        // Note: In ES6, constructor() === componentWillMount() in React ES5
        constructor() {
            super();
            this.state = {
              subscription: {
                tasks: Meteor.subscribe('userData')
              },
              data:{}
            }
        }

      getingData(){

        let data=RealTime.find().fetch();
        return data;

      }
        render() {


        const gamedata=this.getingData();
        console.log(this.getingData());

            return (
        <div className="container ">
                   <div className="board-player-top">
                                    <img className="user-pic" src="../../../../../images/player-img-top.png" alt="" title=""/>
                                        <div className="board-player-userTagline">
                                            <div className="user-tagline-component">
                                                <a href="#" target="_blank" className="user-tagline-username">Black Name</a> 
                                                <i>2202<img src="../../../../../images/user-flag.png" alt=""/></i>

                            </div> 
                                            <div className="captured-pieces">
                                            <img src="images/small-picW-1.png" /> <img src="images/small-picW-2.png" />
                                            </div>

                                            <div className="clock-top">
                                                10:00
                                            </div>
                                        </div>
                                </div>

            <Game/>
             <div className="board-player-bottom">
                        <img className="user-pic" src="../../../images/player-img-bottom.png" alt="" title=""/>
                            <div className="board-player-userTagline">
                                <div className="user-tagline-component">
                                    <a href="#" target="_blank" className="user-tagline-username">Staick</a> <i>1576<img src="../../../images/user-flag.png" alt=""/></i>
                                </div>
                                <div className="captured-pieces">
                            <img src="images/small-picB-1.png" /> <img src="images/small-picB-2.png" />
                            </div> 
                                <div className="clock-bottom active">
                                    10:00
                                </div>
                            </div>
                </div>  

        </div>
            )

    }
    };
    export default MainPage

у меня есть console.log (this.getingData ()) внутри рендера найден следующие данные со стороны сервера, которые автоматически обновляются. enter image description here

Коммунизация приложений с помощью сокета io другого сервера и публикация данных в клиенте meteor. Структура приложения следующая: enter image description here

1 Ответ

0 голосов
/ 17 мая 2019

Вы можете передавать данные в дочерний компонент, используя реквизиты, но здесь вы можете найти проблему каждый раз, когда вы получаете передачу игровых данных в качестве реквизита для дочернего компонента, тогда дочерний компонент будет обновляться. Вы должны simantanilious передавать данные каждому дочернему компоненту.

...