Meteor 和 React 与响应式样式

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