Question

到目前为止，这是我的代码

class PortfolioList extends Component{


render(){
    const {column , styevariation } = this.props;
    const list = PortfolioListContent.slice(0 , this.props.item);
    return(
        <React.Fragment>
            {list.map((value , index) => (

                <div className={`${column}`} key={index}>
                    <div className={`portfolio ${styevariation}`}>
                        <div className="thumbnail-inner" >
                            <div className={`thumbnail ${value.image}`}></div>
                            <div className={`bg-blr-image ${value.image}`}></div>
                        </div>

                        <div className="content" >

                        <div className="inner">
                            <p>{value.category}</p>
                            <h4><a href="/portfolio-details">{value.title}</a></h4>
                            <div className="btn-container">
                            <div className="portfolio-button">
                                <a className="rn-btn" href="/portfolio-details"><FaGithub /> Git </a>
                            </div>
                            <div className="portfolio-button">
                                <a className="rn-btn" href="/portfolio-details"><FaExternalLinkAlt /> Live </a>
                            </div>
                            </div>
                        </div>

                    </div>



                    </div>
                </div>

            ))}

        </React.Fragment>
    )
}

}

当鼠标悬停在“缩略图内部” div上时，我想有条件地渲染div的“内容”和内容div的子元素。但是，当鼠标没有悬停在缩略图内部div上时，隐藏内容。

我该如何实现？

Answer 1

我没有对此进行测试，但想法是在组件的状态下添加一个变量，该变量保存当前悬停的项目。当mouseEnter事件输入您的thumbnail-inner时，您将使用当前组件索引更新该变量。当您的-1中发生mouseLeave个事件时，可以将其设置为thumbnail-inner。

然后，您只需检查content是否简单地有条件地渲染this.state.selectedIndex === index。

class PortfolioList extends Component {

state = {
    selectedItem: -1,
}

render(){
    const {column , styevariation } = this.props;
    const list = PortfolioListContent.slice(0 , this.props.item);
    return(
        <React.Fragment>
            {list.map((value , index) => (

                <div className={`${column}`} key={index}>
                    <div className={`portfolio ${styevariation}`}>

                        <div 
                            className="thumbnail-inner" 
                            onMouseEnter={ () => { this.setState({selectedItem: index}) } } 
                            onMouseLeave={ () => { this.setState({selectedItem: -1}) } }>

                            <div className={`thumbnail ${value.image}`}></div>
                            <div className={`bg-blr-image ${value.image}`}></div>
                        </div>

                        {
                            this.state.selectedItem === index &&
                            <div className="content" >

                                <div className="inner">
                                    <p>{value.category}</p>
                                    <h4><a href="/portfolio-details">{value.title}</a></h4>
                                    <div className="btn-container">
                                    <div className="portfolio-button">
                                        <a className="rn-btn" href="/portfolio-details"><FaGithub /> Git </a>
                                    </div>
                                    <div className="portfolio-button">
                                        <a className="rn-btn" href="/portfolio-details"><FaExternalLinkAlt /> Live </a>
                                    </div>
                                    </div>
                                </div>

                            </div>                            
                        }

                    </div>
                </div>

            ))}

        </React.Fragment>
    )
}

反应悬停到条件渲染组件

1 个答案: