Question

我想在reactjs中实现CSS，但是从这个url

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应用样式。不同之处在于，如果您使用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/

在ReactJS中使用样式

1 个答案: