2016-02-27 65 views
1

我正在爲項目使用ReactJS,並試圖使用ReactCSSTransitionGroup插件(是的,我正在加載react-with-addons.js文件)。下面是我在渲染方法是做最基礎的:即使我使用非縮小文件,ReactJS也會縮小錯誤

var menu = this.state.menu ? <p>Here is the menu</p> : null; 
return (
    <ReactCSSTransitionGroup 
     transitionAppear={true} 
     transitionAppearTimeout={100} 
     transitionEnterTimeout={100} 
     transitionLeaveTimeout={100} 
     transitionName="fade"> 
      {menu} 
    </ReactCSSTransitionGroup> 
); 

這裏是我的SCSS文件:

.fade-enter, .fade-appear { 
    opacity: 0; 

    &.fade-enter-active, &.fade-appear-active { 
     opacity: 1; 
     -webkit-transition: opacity 1000ms ease-in-out; 
     transition: opacity 1000ms ease-in-out; 
    } 
} 

.fade-leave { 
    opacity: 1; 

    &.fade-leave-active { 
     opacity: 0; 
     -webkit-transition: opacity 1000ms ease-in-out; 
     transition: opacity 1000ms ease-in-out; 
    } 
} 

菜單會顯示出來,我第一次打電話this.setState({ menu: true });(雖然它不」 t淡入,它只是出現),但之後,即使我打電話this.setState({ menu: false });它不會消失。

令人沮喪的是,我得到一個錯誤,我第一次改變menu狀態,但它給我一個縮小的錯誤,即使我有兩個react-with-addons.js的開發版本和react-dom.js

Uncaught Error: Minified exception occurred; use the non-minified dev 
environment for the full error message and additional helpful warnings. 

我確信如果我得到一個完整的錯誤信息,我可以找出我做錯了什麼,但它給了我一般的錯誤消息,我不知道爲什麼。

有沒有人見過這個?

回答

0

我正在使用gulp一段時間,但切換到使用webpack,即使我在webpack中包含反應,但我仍在加載外部文件。這最終導致了什麼導致的問題,因爲有兩個版本的反應加載,所以我只需要將一個句柄附加到窗口,以便我可以從我的其他JavaScript文件訪問它,現在一切正常。