Question

我通过路由器（FlowRouter）将数据从一个组件传递到另一个组件（MyApplicants）：

FlowRouter.route('/applicants', {
    name: 'Applicants',
    action: function () {
        var currentUser = Meteor.user();
        ReactLayout.render(App, {
            content:    <MyApplicants institutionID={Meteor.user().profile.institutionID} />,
            nav:        <Nav />,
            header:     <Header />
        });
    }
});

如您所见，我通过路由器中的prop将institutionID传递给新组件。我知道institutionID正在传递，因为我可以在MyApplicants组件的渲染中看到它。

以下是MyApplicants组件：

MyApplicants = React.createClass({
    mixins: [ReactMeteorData],

    pagination: new Meteor.Pagination(Applicants, {
        perPage: 25,
        filters: {institution_id: this.props.institutionID },
        sort: {institution_id: 1, "last_name":1, "first_name":1}
    }),

    getMeteorData() {
        return {
            currentUser: Meteor.user(),
            applicants: this.pagination.getPage(),
            ready: this.pagination.ready()
        }
    },
    RenderApplicantRow(applicant, key) {
        return (
            <div key={key}>
                <p>[{applicant.institution_id}] {applicant.last_name}, {applicant.first_name}</p>
            </div>
        )
    },

    render : function () {
        return (
            <div>
                <section className="content">

               {this.data.applicants.map(this.RenderApplicantRow)}
                          {console.log(this.data.applicants)}

                          <DefaultBootstrapPaginator
                              pagination={this.pagination}
                              limit={6}
                              containerClass="text-center"/>

                </section>
            </div>
        )
    }
});

（仅供参考，我正在使用krounin:pagination。）问题是我无法访问分页组件内的this.props.institutionID。我知道值正在传递（如果我只是在渲染中测试输出，我可以看到它）但是无法弄清楚为什么它不会传递给分页调用。我知道分页是有效的，因为如果我硬编码值，我就不会收到错误。

感谢您的帮助。

Answer 1

我认为这是一个简单的范围问题，您需要将其绑定到正确的上下文尝试这样的事情：

 pagination: function() {
     var self= this;
     new Meteor.Pagination(Applicants, {
        perPage: 25,
        filters: {institution_id: self.props.institutionID },
        sort: {institution_id: 1, "last_name":1, "first_name":1}
    })
}

，

（Meteor + React）无法从子组件中访问道具

1 个答案: