javascript - 更改悬停时的图像 React 重新渲染所有子项

Question

我需要更改悬停时 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>
        )
    }
});

Answer 1

您想要查看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.