阵营：淡出不工作

我使用的是从这里验证码：http://buildwithreact.com/article/fade-in-image-recipe 阵营：淡出不工作

目前它作为我的组件：

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

现在，当我去谷歌Chrome和检查的元素，它具有类名称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;

来源

2017-06-24 intangibles

从帖子中得到的[JSbin]（http://jsbin.com/velakevahi/1/embed?css,js,output）效果很好：所以我认为你在代码中丢失了一些东西。你能分享吗？ – soywod

@soywod我编辑我的文章，包括代码。我解开了一些reactbootstrap的东西和其他东西，只有这个图像。你认为它与css文件有关吗？反应使用CSS的方式是className = {style.doThis}对不对？但是当我看看ImageComponent代码时，它没有那个我引导它的“样式”或文件名。我不确定这是否是问题 – intangibles

尝试使图像的URL作为道具imagecomponent并直接将其连接到img元素。

来源

2017-06-25 03:11:14 mhdnp1234

阵营：淡出不工作

回答

相关问题