Question

当用户登录时，我尝试在“注销表单”中添加一个类，其中包含“display：block”，即使是“！important”标记也会覆盖注销表单上的任何显示属性。我已经尝试重新加载页面，因为一旦用户登录，它确实会显示注销表单，但它会陷入无限循环。

import React from 'react';
import ReactDOM from 'react-dom';

export default class AccountsUI extends React.Component {

  componentDidMount() {
    Accounts._loginButtonsSession.set('dropdownVisible', true);
    this.view = Blaze.render(Template.loginButtons,
      ReactDOM.findDOMNode(this.refs.container));

       setTimeout(function () {
         window.requestAnimationFrame(function() {
           var node = ReactDOM.findDOMNode();
           if (node !== undefined){
            Accounts.onLogin(function(user){
              document.getElementById('login-dropdown-list').className = "accounts-dialog hide-div"
              console.log(document.getElementById('login-dropdown-list').className)
            })
           }
         });
       }, 250)
  }

  componentWillUnmount() {
    Blaze.remove(this.view);
  }

  render() {
    return <span ref="container" />
  }
}

我也将改变触发类添加的方式。我知道等待1/4秒是非常原始的，并不会一直有效。

Answer 1

Meteor.userId()函数是被动的，这意味着如果您在getMeteorData()中调用它，则每次userId更改时都会再次调用它。将其保存到this.data，并在render()中使用它。

我还建议您为Blaze组件创建一个名为LogoutUIWrapper的React包装器，它只进行包装而不是其他任何操作，只是为了让您的生活更轻松。见这里：https://www.meteor.com/tutorials/react/adding-user-accounts

所以你需要做这样的事情：

export default class AccountsUI extends React.Component {
  getMeteorData() {
    return {
      userId: Meteor.userId(),
    };
  }

  render() {
    return (
      <div>
        { this.data.userId ? null : <LogoutUIWrapper /> }
      </div>
    );
  }
}

这样，LogoutUIWrapper组件只会在用户登录时显示。

如何更改Meteor accounts-ui的行为，以便在用户登录时自动显示注销表单，反之亦然

1 个答案: