如何流星反应订阅组件中的数据绑定？答案

【问题标题】：how to meteor react subscribe data bind in component?如何流星反应订阅组件中的数据绑定？
【发布时间】：2019-05-18 03:08:17
【问题描述】：

我正在设置一个新的流星反应应用程序，它从服务器订阅新数据。我只想将数据绑定到主页组件。我有以下代码主页组件。

    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()) 以下来自服务器端的数据会自动更新。

借助 socket io 其他服务器的应用程序通信和数据发布到流星客户端。应用程序布局遵循 structer

【问题讨论】：

我很抱歉英语不好
您实际上只是在转储您的代码，并要求我们将其转换为具有不同功能的东西。你试过什么了？看起来你甚至没有完成流星反应教程。

标签： reactjs meteor meteor-react

【解决方案1】：

您可以使用道具将数据传递给子组件，但是在这里您每次收到作为道具传递给子组件的游戏数据时都会发现问题，然后子组件将更新。您应该将数据同时传递给每个子组件。

【讨论】：