Question

我正在制作新的Meteor-React应用程序原型。图像存储在S3中。它们可通过网址访问。尚未添加订阅，尚未删除自动发布。要按照教程中的建议将反应行为添加到React，react-addons-pure-render-mixin和react-meteor-data会添加到项目中。我明白，user.profile不是立即可用的，所以有一个检查：

avatarUrl(){
    var user = Meteor.user();
    return (user&&user.profile?Meteor.user().profile.avatar:"/no-thumb2.jpg");
}

在我的页面上，我有以下代码：

render() {
    return (
        <div className="container">
            <header>
                <h1>...</h1>
            </header>

            <Image ref="ava" src={this.avatarUrl()} height="171" width="180" circle title="..." />

但结果是没有图像no-thumb2.jpg拇指。

Answer 1

您需要使用Container组件包装组件，以便使用react-meteor-data中的响应数据。我们假设您的组件名为App，它看起来像这样：

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

class App extends React.Component {
  render() {
    return(
      <Image ref="ava" src={this.props.avatar} height="171" width="180" circle title="..." />
    )
  }
}

// CONTAINER that wraps App
export default AppContainer = createContainer( ({}) => {
  const user = Meteor.user();
  const avatar = (user&&user.profile?Meteor.user().profile.avatar:"/no-thumb2.jpg");

  return {
    avatar
  }
}, App);

然后使用AppContainer代替App。这应该反应性地更新你的头像。您可以详细了解此方法here。你也可以使用匿名容器，但我更喜欢这种方法。

流星中未显示的用户头像会做出反应

1 个答案: