您好:)我对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/

10-12 13:02
查看更多