在 ReactJS 中使用样式答案

【问题标题】：Working with styling in ReactJS在 ReactJS 中使用样式
【发布时间】：2016-11-28 10:14:03
【问题描述】：

我想在 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 中的哪些地方使用？

网上有资源吗？？任何帮助都将不胜感激。

【问题讨论】：

为什么这篇文章会受到负面评价？
可能是因为不清楚，而且跑题了
@TimCastelijns 但我已经定义了每一件事？那么它是如何成为题外话的呢？
我已经定义了每一件事 真的吗？你的问题基本上是：“我想实现一些东西”，“这是一个链接，我不明白”，“我该怎么做”，“有可用的资源”
@TimCastelijns 谢谢，你是对的。

标签： css reactjs

【解决方案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/

【讨论】：

但是上面的 URL 是用于 CSS 的，我找不到它们的任何 classname 属性？
对不起，我不明白这个问题。