反応したスタイリングで流星と反応する

Question

流星と反応の両方に新しいので、私はこれは非反応的な方法であると私はそれが間違っていることを知っているが、私は妥当な方法を考え出すのに苦労しているそうかもしれない。

1）logIn変数とlogOut変数は関数でなければならないと思いますが、レンダリングに関数を入れる方法は不明です。

2）Meteor.logout（document.location.reload（））;は正しくないようです。

私はこれらの2つの概念を1つにまとめることができると思う。

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

コンポーネントレンダリングを反応的に行うには、反応するコンテナにラップする必要があります。そこは非常に多くの反応性の容器はそこにありますが、私は通常流星チームからの公式コンテナが

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