Question

我的一个React组件是我的主要布局，我在其中显示当前登录用户的导航栏。问题是，首次呈现Component时Meteor.user()为undefined。一旦加载/发布用户对象，我将如何正确渲染我的导航栏？

MainLayout.jsx

import React, { Component } from 'react';

export default class MainLayout extends Component {
  render() {
    return (<div>{ Meteor.user().username }</div>);
  }
}

感谢。

Answer 1

Meteor.user（）应该是other application的一部分。 react-meteor-data包应该添加到项目中。

import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import MainLayout from './mainLayout';

export default MainLayoutContainer = createContainer(({ params }) => {
  return {
    user: Meteor.user(),
  };
}, MainLayout);

用户将在MainLayout组件中作为道具使用。

Answer 2

要在React组件内使用Meteor集合中的数据，我们可以使用Atmosphere软件包react-meteor-data，它允许我们创建一个“数据容器”，将Meteor的被动数据提供给React的组件层次结构。

meteor add react-meteor-data

import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';

class MainLayout extends Component {
  render() {
    return (<div>{ this.props.user.username }</div>);
  }
}

export default MainLayoutContainer createContainer(() => {
  return {
    user: Meteor.user()
  };
}, MainLayout);

在Meteor React组件中显示用户名

MainLayout.jsx

2 个答案: