在ReactJS

Question

與造型工作，我想實現reactjs CSS，但這個網址

ReactJS - Animations

App.jsx

import React from 'react'; 
var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); 

    class App extends React.Component { 

     render() { 
      return (
      <div> 
       <ReactCSSTransitionGroup transitionName = "example" 
        transitionAppear = {true} transitionAppearTimeout = {500} 
        transitionEnter = {false} transitionLeave = {false}> 

        <h1>My Element...</h1> 
       </ReactCSSTransitionGroup> 
      </div>  
     ); 
     } 
    } 

export default App; 

CSS/style.css中

.example-appear { 
    opacity: 0.01; 
} 

.example-appear.example-appear-active { 
    opacity: 1; 
    transition: opacity 500ms ease-in; 
} 

我不知道css中的example-appear和example-appear.example-appear-active？他們在哪裏使用App.jsx？

有沒有可用的網絡資源？任何幫助將是可觀的。

Answer 1

您可以像使用React一樣正確應用React。不同之處在於，如果您使用的是jsx語法，則可以輸入className而不僅僅是class。

舉例來說，如果你有這樣的組件：

var CommentBox = React.createClass({ 
    render: function() { 
    return (
     <div className="commentBox"> 
     Hello, world! I am a CommentBox. 
     </div> 
    ); 
    } 
}); 
ReactDOM.render(
    <CommentBox />, 
    document.getElementById('content') 
); 

和css文件與此：

.commentBox { 
    color: red; 
} 

那麼你的文字會變成紅色。

我建議你開始一個包括使用webpack（這是你如何捆綁和包含實際的CSS在你的頁面）的整個過程很好的演練。這是我開始，並認爲這是偉大的：http://survivejs.com/webpack/introduction/