您好:)我对js的反应还比较陌生,我正在尝试在另一个div的子级div上应用动画,父div“ portfolio-product-item
”显示从wp rest api提取的特色图像,而子div“ ”包含帖子的内容。
我想要做的是将内容悬停在父div中的特色图像上时显示内容,我的代码是这样的,我该如何实现?
import React from 'react';
import Home from './Home';
require ('../../app.css');
require ('../../animate.min.css');
class Portfolio extends React.Component{
render(){
console.log(this.props.data.length);
var contents=[];
for (var i = 0; i < this.props.data.length; i++) {
contents.push(
<div className="col-xs-12 col-md-4">
<div id="portfolio-product-item" >
<img src={this.props.data[i].featured_image} />
<div ref= "productDetails" id ="portfolio-product-item-details" dangerouslySetInnerHTML={{__html: this.props.data[i].content.rendered}} />
</div>
</div>
);
}
return(
<div className = "container">
<div className="row">
<section className="portfolio">
<h1>Our Latest Work</h1>
<p id="below-header">These are some of the works that has been keeping us busy over the years. See for yourself what we can do.</p>
<div className="col-xs-12 ">
{contents}
</div>
</section>
</div>
</div>
)
}
}
export default Portfolio;
最佳答案
React允许在虚拟DOM中添加/删除元素。使用onMouseEnter和onMouseLeave设置显示/隐藏状态。
<img
onMouseEnter={() => this.setState({ show: true })}
onMouseLeave={() => this.setState({ show: false })}
/>
然后根据状态显示/隐藏详细信息:
{this.state.show ?
<div ref= "productDetails" id ="portfolio-product-item-details"
dangerouslySetInnerHTML={{__html: this.props.data[i].content.rendered}}
/>
: null}
关于javascript - 在React JS中在父div上悬停显示子div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39409379/