在React框架中实现一些AngularJS中ng指令的例子

这篇文章主要介绍了在JavaScript的React框架中实现一些AngularJS指令的例子,React使用Virtual DOM因而与普通的js框架有些不同,需要的朋友可以参考下

首先设定一段Angularjs代码的ng-class：

<i class="header-help-icon down" ng-class="{up:showMenu}"></i>

比较容易理解的Angularjs ng-class设置样式代码，那我们使用React怎么去实现它呢？

首先在state设置一个变量比如： isShowLoginMenu，在不同场景改变它的值，然后在绑定在class样式上面  

<i className={"header-help-icon down" + (this.state.isShowLoginMenu ? ' up' : '')}></i> 

or

<span id="vip-header-logo" className={'vip-logo icon-vip-v' + this.state.vipLevel}></span> 

使用Angularjs我们可以这样做：

<div class="logined" ng-show="isLogin">登录了</div> 

<div class="logined" ng-if="isLogin">你好，{userName}</div> 

<div class="no-login" ng-hide="isLogin">未登录</div> 

那我们使用React要怎么去实现这样的场景呢？

React.createClass({ 

 getInitialState: function() { 

  return { 

   isLogin: true, 

   userName: 'Joe'

  }; 

 }, 

 render: function() { 

   var isLogin = this.state.isShowLoginMenu, 

   loginHtml; 

   if (isLogin) { 

    loginHtml = 

     <div className="logined"> 

      登录了，欢迎{this.state.userName} 

     </div>; 

   } else { 

    loginHtml = 

     <div className="no-login"> 

      未登录 

     </div>; 

   } 

  return ( 

    <div className="user"> 

     {loginHtml} 

    </div> 

  ); 

 }