Meteor & Reagieren mit reaktivem Styling

Question

Da ich Meteor und React neu kenne, gehe ich davon aus, dass dies eine nicht-reaktive Methode ist und ich weiß, dass es falsch ist, aber ich finde es schwierig, herauszufinden, was der richtige Weg ist könnte dies sein.

1) logIn und logOut Variablen sollten eine Funktion sein, denke ich, aber ich bin nicht klar, wie man eine Funktion in ein Render setzen.

2) Meteor.logout (document.location.reload()); scheint falsch zu sein.

Ich fühle mich wie ich diese beiden Konzepte zu einem zusammenführen könnte.

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

Damit Ihre Komponente reaktiv gerendert wird, müssen Sie sie in einen reaktiven Behälter wickeln. Es gibt ziemlich viel reaktive Behälter gibt, aber ich verwende createContainer in die Regel, die die offiziellen Container von Meteor-Team ist

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