Question

我刚用我的当前项目实现了一个小型身份验证系统 accounts-password包。认证本身正常运作。

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

问题如下：当我登录（或退出）时，我的视图不会重新渲染。它根本不是隐藏或显示应切换的按钮。它总是需要一个独立的重新呈现来显示或隐藏它们。

Meteor-Documentation状态，Meteor.userId()应该被动，但它在我的组件中不会那样。

这里有一些反应组件显示我的视图如何根据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);

Answer 2

另一个值得关注的答案是trackerReact包，网址为 https://github.com/ultimatejs/tracker-react

使用它应该使组件具有反应性，就像您期望的那样。

class SomeReactComponent extends TrackerReact(React.Component) {

Meteor.userId（）在反应组件中不起作用？

2 个答案: