javascript - meteor 与React具有反应性样式

对于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>
    );
  }
}

最佳答案

为了使您的组件具有反应性，您需要将其包装在反应容器中。有很多反应容器，但我通常使用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);