Question

对Meteor和React都不熟悉，我认为这是一种非反应性方式，我知道这是不正确的，但我很难弄清楚这样做的正确方法。

1）logIn和logOut变量应该是一个函数，我想，但我不清楚如何将函数放在渲染中。

2）Meteor.logout（document.location.reload（））;,似乎不正确。

我觉得我可以将这两个概念合并为一个。

export default class Header extends React.Component {
  render() {
    $(".button-collapse").sideNav();
    var navStyle = {
      backgroundColor: "#263238",
      paddingLeft: "10px"
    };
    var logIn = {
      display: (Meteor.userId() ? "none" : "block")
    };
    var logOut = {
      display: (Meteor.userId() ? "block" : "none")
    };
    return (
      <nav style={navStyle}>
        <div>
          <a href="/" className="brand-logo">ShortShape</a>
          <a href="#" data-activates="mobile-demo" className="button-collapse"><i className="material-icons">menu</i></a>
          <ul className="right hide-on-med-and-down">
            <li><a href="/">Home</a></li>
            <li style={logOut}><a href="javascript:Meteor.logout(document.location.reload());">Logout</a></li>
            <li style={logIn}><a href="/register">Register</a></li>
            <li style={logIn}><a href="/login">Login</a></li>
            <li><a href="/stories">Stories</a></li>
          </ul>
          <ul className="side-nav" id="mobile-demo">
            <li><a href="/">Home</a></li>
            <li style={logOut}><a href="javascript:Meteor.logout(document.location.reload());">Logout</a></li>
            <li style={logIn}><a href="/register">Register</a></li>
            <li style={logIn}><a href="/login">Login</a></li>
            <li><a href="/stories">Stories</a></li>
          </ul>
        </div>
      </nav>
    );
  }
}

Answer 1

为了让您的组件具有反应性，您需要将其包装在反应容器中。那里有很多反应容器，但我通常使用createContainer这是Meteor团队的官方容器

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

class Header extends React.Component {
  logout() {
    Meteor.logout(() => {
      window.location.reload();
    });
  }
  render() {
    const user = this.props.user;

    $(".button-collapse").sideNav();
    var navStyle = {
      backgroundColor: "#263238",
      paddingLeft: "10px"
    };
    var logIn = {
      display: (user ? "none" : "block")
    };
    var logOut = {
      display: (user ? "block" : "none")
    };
    return (
      <nav style={navStyle}>
        <div>
          <a href="/" className="brand-logo">ShortShape</a>
          <a href="#" data-activates="mobile-demo" className="button-collapse"><i className="material-icons">menu</i></a>
          <ul className="right hide-on-med-and-down">
            <li><a href="/">Home</a></li>
            <li style={logOut}>
              <a onClick={this.logout}>Logout</a>
            </li>
            <li style={logIn}><a href="/register">Register</a></li>
            <li style={logIn}><a href="/login">Login</a></li>
            <li><a href="/stories">Stories</a></li>
          </ul>
          <ul className="side-nav" id="mobile-demo">
            <li><a href="/">Home</a></li>
            <li style={logOut}>
              <a onClick={this.logout}>Logout</a>
            </li>
            <li style={logIn}><a href="/register">Register</a></li>
            <li style={logIn}><a href="/login">Login</a></li>
            <li><a href="/stories">Stories</a></li>
          </ul>
        </div>
      </nav>
    );
  }
}

export default createContainer(() => {
  // this function will run reactively
  return {
    user: Meteor.user(),
  };
}, Header);

流星＆amp;与反应式造型发生反应

1 个答案: