meteor - 当 React 组件的属性是来自 Meteor 的响应式(Reactive)数据源时，我可以让它重新渲染自身吗？

Question

例如我有一个用户个人资料名称组件:

Name = React.createClass({
  render() {
    let name = this.props.user ? this.props.user.profile.name : '';
    return <span>{name}</span>;
  }
})

当用户登录/退出时，如何让以下名称标签自动更新:

<Name user={Meteor.user()} />

Answer 1

实现此目的的一种方法是使用 React mixin，ReactMeteorData。在 getMeteorData 中，将 Meteor 用户的身份设置为响应式数据源。

Name = React.createClass({
    mixins: [ReactMeteorData],
    getMeteorData() {
        return {
            user: Meteor.user()
        };
    },
    render() {
        return <div>{ this.data.user ? this.data.user.username : '' }</div>;
    }
});

如果用户身份要通过 React 属性传递，请将响应式(Reactive)数据源移动到包含组件。

Name = React.createClass({
    render() {
        return <div>{ this.props.user ? this.props.user.username : '' }</div>;
    }
});

Parent= React.createClass({
    mixins: [ReactMeteorData],
    getMeteorData() {
        return {
            user: Meteor.user() // Or any reactive data here
        };
    },
    render() {
        return <Name user={ this.data.user } />;
    }
});

根据 documentation，组件的 render 函数不是 react 性的。 ReactMeteorData mixin 是实现 react 性的最简单的添加。

If you access a Meteor reactive data source from your component's render method, the component will not automatically rerender when data changes. If you want your component to rerender with the most up-to-date data, access all reactive functions from inside the getMeteorData method.