reactjs - Meteor.userId() 在 react 组件中不具有反应性？

Question

我刚刚使用以下方法为我当前的项目实现了一个小型身份验证系统 accounts-password 包。身份验证本身工作正常。

在我看来，有些按钮和内容应该只向登录用户显示。我通过检查 Meteor.userId() 得到了这个工作。如果null，则不会显示按钮。

问题如下:当我登录(或注销)时，我的 View 不会重新呈现。它根本不隐藏或显示应切换的按钮。它总是需要独立的重新渲染来显示或隐藏它们。

Meteor-Documentation声明，Meteor.userId() 应该是响应式的，但它在我的组件中的行为方式并非如此。

这是一些 react 组件，显示我的 View 如何根据 Meteor.userId() 显示或隐藏按钮:

class SomeReactComponent extends React.Component {
    constructor(props) {
        super(props);
        ...
    }

    ...

    render() {
        return (
            <span>
                <p>Text that should be displayed to anyone!</p>
                { Meteor.userId() ? (
                    <button id="btn">
                        This button is only available to logged in users
                    </button>
                ) : ""}
            </span>
        );
    }
}

Answer 1

使用createContainer，这将使您的Meteor.userId()具有反应性。安装只需输入:

meteor npm install --save react-addons-pure-render-mixin

meteor add react-meteor-data

import React from "react";
import {createContainer} from "meteor/react-meteor-data";

class SomeReactComponent extends React.Component {
    constructor(props) {
        super(props);
        
    }

   

    render() {
        return (
            <span>
                <p>Text that should be displayed to anyone!</p>
                { this.props.authenticated ? (
                    <button id="btn">
                        This button is only available to logged in users
                    </button>
                ) : ""}
            </span>
        );
    }
}
export default createContainer(()=>{
  return {
    authenticated: Meteor.userId(),
  }
},SomeReactComponent);