css - react : Fade not working

Question

我正在使用这里的代码:http://buildwithreact.com/article/fade-in-image-recipe

目前将它作为我的组件:

<ImageComponent src="https://docs.google.com/uc?id=0B0huBtqYaof7NFV6Nnpkalk5cEU" />

现在，当我去谷歌浏览器检查元素时，它有 image 和 image-loaded 的类名，但是当看一下 css 时，那里没有CSS，即使我将它添加到我的样式表中。有谁知道如何解决这个问题？

.image { opacity: 0;   transition: opacity 500ms ease-in; }
.imageloaded { opacity: 1; }

这是我导入的 css(上面的代码)

 import React, { Component } from 'react';
import ImageComponent from './image.component.jsx';
import styles from './css/Header.css';


    export default class Home extends Component {


     constructor() {
        super();
        this.state = {
          lightboxIsOpen: false,
          currentImage: 0,
        }

        this.closeLightbox = this.closeLightbox.bind(this);
        this.gotoNext = this.gotoNext.bind(this);
        this.gotoPrevious = this.gotoPrevious.bind(this);

      }

      return(
        <div>

    <Grid>
        <div>
                    <ImageComponent src="https://docs.google.com/uc?id=0B0huBtqYaof7NFV6Nnpkalk5cEU" />

    </div>
    </Grid>
    </div>


        )
    }

这是 ImageComponent 的组件

import classNames from 'classnames';
import React, { Component } from 'react';
import ReactDOM, { render } from 'react-dom';



const ImageComponent = React.createClass({
  getInitialState: function() {
    return {
      loaded: false
    };
  },

  onImageLoad: function() {
    if (this.isMounted()) {
      this.setState({ loaded: true });
    }
  },

  componentDidMount: function() {
    var imgTag = ReactDOM.findDOMNode(this.refs.img);
    var imgSrc = imgTag.getAttribute('src');
    var img = new window.Image();
    img.onload = this.onImageLoad;
    img.src = imgSrc;
  },

  render: function() {
    var { className, ...props } = this.props;
    var imgClasses = 'image';
    var rootClassName = classNames(className, 'image', {
      'imageloaded': this.state.loaded,
    });

    return (
      <img ref="img" {...props} className={rootClassName} />
    );
  }
});

export default ImageComponent;

Answer 1

尝试将图像 url 作为 props 传递给 imagecomponent 并将其直接附加到 img 元素。