在悬停上更改img React重新呈现所有子女

我需要更改悬停时img的网址。但是该函数触发所有呈现的孩子。我无法找到一种方法使功能触发每个孩子分开。我尝试做一些新的状态来处理指标，但它没有工作...在悬停上更改img React重新呈现所有子女

const Team = React.createClass ({ 

    getInitialState : function() { 
     return { hovered: false } 
    }, 

    componentDidMount(){ 
     this.props.fetchTeam(); 
     document.title = "Equipe | [ Adesign"; 
    }, 

    onMouseOver : function() { 
     this.setState({ hovered:true }); 
    }, 

    onMouseOut : function() { 
     this.setState({ hovered:false }); 
    }, 

    render(){ 
     return (
      <div className="wrapper"> 
       <div className="Team"> 
        <HeaderAbout /> 
        <h1>EQUIPE</h1> 
        <div className="content-team"> 
        {this.props.posts.team.map((singleTeam, i) => { 
         var imgUrl = singleTeam.acf.photo.url; 
         if (this.state.hovered) { 
          imgUrl = singleTeam.acf.gif.url; 
         } else { 
          imgUrl = singleTeam.acf.photo.url; 
         } 
         return(
          <div key={i} className="single-team col-xs-12 col-sm-6 col-md-4" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}> 
           <img className="img-responsive" src={imgUrl}/> 
           <p>{singleTeam.title.rendered}</p> 
          </div> 
         ) 
        })} 
        </div> 
       </div> 
      </div> 
     ) 
    } 
});

来源

2016-08-19 Erick Amaral

要检出的shouldComponentUpdate method：渲染时新道具或状态之前

调用正在收到。不使用此方法进行初始渲染或使用forceUpdate 。

当您确定转换到新的道具和状态将不需要更新组件时，将此作为返回false的机会。

来源

2016-08-19 19:51:45 martriay

为了避免渲染所有图像，您可以创建一个组件来渲染包含状态和事件处理程序的图像。通过这样做，您可以防止在图像悬停时重新渲染父组件及其兄弟。

编辑︰我刚刚意识到，你的代码更改所有图像时，他们中的任何一个被徘徊。你确定这是你想要的吗？在这种情况下，你需要放弃一切。我的解决方案只有在您只想更改徘徊图像而其他图像完好时才有效。

来源

2016-08-19 20:52:45

在悬停上更改img React重新呈现所有子女

回答

相关问题