Meteor & React with reactive styling

Question

作为Meteor和React的新手，我采用了一种非反应性的方法，我知道这是不正确的，但我很难弄清楚正确的方法是什么。

1)我认为logIn和logOut变量应该是一个函数，但我不清楚如何将函数放入render中。

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，它是流星团队的官方容器

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);