Question

我需要在悬停时更改img的url。但该函数会触发所有渲染的子节点。我无法找到一种方法让函数触发每个孩子分开。我尝试建立一些新状态来处理索引，但它没有工作......

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>
        )
    }
});

Answer 1

您想结帐shouldComponentUpdate method：

在收到新道具或州时，在渲染前调用。   初始渲染或forceUpdate时不调用此方法   使用。

当您确定这一点时，请将此作为返回虚假的机会   过渡到新道具和州不需要组件   更新

Answer 2

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

编辑：我刚刚意识到，当任何图片悬停时，您的代码会更改所有图片。你确定它是你想要的吗？在这种情况下，你需要重新渲染一切。我的解决方案仅在您只想更改悬停图像时保持有效，而其他图像保持不变。

在悬停时更改img React重新渲染所有子项

2 个答案: