将 Meteor.user() 传递给组件？

Question

我目前正在使用themeteorchef/base 样板项目。当我从 Meteor/Blaze 转到 Meteor/React 世界时，这真的很有帮助。

通过容器将订阅数据传递给组件非常简单。但是，尝试创建一个基本的个人资料页面非常困难，我觉得我错过了一些简单的东西。到目前为止，我已经设法将用户对象作为 json 字符串传递（这并不理想）。

我的问题是 - 将登录用户的信息传递给反应组件的最佳方式是什么？

在我的容器中，我有...

import { Meteor } from 'meteor/meteor';
import { composeWithTracker } from 'react-komposer';
import ViewProfile from '../pages/ViewProfile.js';
import Loading from '../components/Loading.js';

const composer = ({ params }, onData) => {
  const currentUser = JSON.stringify( Meteor.user() );
  onData(null, { currentUser });
};

export default composeWithTracker(composer, Loading)(ViewProfile);

而我的组件是一个简单的显示...

import React from 'react';
import NotFound from './NotFound';

const ViewProfile = ( { currentUser } ) => { 
  return currentUser ? (
    <p>{ currentUser }</p>
  ) : <NotFound />;
};

ViewProfile.propTypes = {
  currentUser: React.PropTypes.string
};

export default ViewProfile;

Answer 1

终于搞定了！

通过容器传递 Meteor.user（反应数据）仍然是正确的方法，它正在到达组件，但是，在我的组件中，我只需要引用特定的对象值（字符串或数组）。

所以在我的容器里：

import { composeWithTracker } from 'react-komposer';
import ViewProfile from '../pages/ViewProfile.js';
import Loading from '../components/Loading.js';

const composer = (params, onData) => {
  const user = Meteor.user();

  if (user) {
      const currentUser = {
          fname: user.profile.name.first,
          lname: user.profile.name.last,
          email: user.emails[0].address
      }

      onData(null, { currentUser });
  }

export default composeWithTracker(composer, Loading)(ViewProfile);

然后在我的组件中：

import React from 'react';
import NotFound from './NotFound';

const ViewProfile = ( {currentUser} ) => {
  //console.log(currentUser);

  return (currentUser) ? (
    <p>{ currentUser.fname }</p>
    <p>{ currentUser.lname }</p>
    <p>{ currentUser.email }</p>
  ) : <NotFound />;  
};

ViewProfile.propTypes = {
  currentUser: React.PropTypes.object,
};

export default ViewProfile;

Answer 2

事实上，您可以在任何地方访问“Meteor.user()”，因此您不需要从 Composer 或 Parent-Component 传递它。 因此，在您的简单组件中，您可以使用：

import React from 'react';
import NotFound from './NotFound';

const ViewProfile = () => { 
  return (Meteor.user()) ? (
    <p>{JSON.stringify(Meteor.user())}</p>
  ) : <NotFound />;
};

export default ViewProfile;