我需要更改悬停时 img 的 url。 但该函数会触发所有正在渲染的子项。 我找不到一种方法来使该函数单独触发每个 child 。 我尝试创建一些新状态来处理索引,但它不起作用......
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>
)
}
});
最佳答案
您想要查看shouldComponentUpdate
method :
Invoked before rendering when new props or state are being received. This method is not called for the initial render or when forceUpdate is used.
Use this as an opportunity to return false when you're certain that the transition to the new props and state will not require a component update.
关于javascript - 更改悬停时的图像 React 重新渲染所有子项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39046628/