Question

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

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

在套接字io其他服务器的帮助下进行应用程序压缩，并将数据发布到流星客户端。应用程序布局遵循构造器

Answer 1

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

流星反应如何将订阅数据绑定到组件中？

1 个答案: