javascript - React : on hover over component 1, 改变另一个组件的样式

Question

我正在学习 React，我有一些代码等待悬停在按钮上，然后在悬停的图像上应用不透明的白色覆盖层(这有效):

class Product extends Component {
  constructor(props) {
        super(props);
        // 1. bind your functions in the constructor.
        this.mouseOver = this.mouseOver.bind(this);
        this.mouseOut = this.mouseOut.bind(this);
        this.state = {
            hover: false
        };
    }

    // 2. bind it with fat arrows.
    mouseOver = () => {
        this.setState({hover: true});
    }
    mouseOut() {
        this.setState({hover: false});
    }

  render() {
    return (
      <Link to={"/products/"+this.props.value.uid}>
        <button className="Product" onMouseEnter={this.mouseOver.bind(this)} onMouseLeave={this.mouseOut.bind(this)}>
          <img className="ImageGrid" src={this.props.value.media}/>
          {this.state.hover ? (
            <div className="ImageOverlay"> 
              <div className="TextOverlay">
                <p><b>{this.props.value.name}</b></p>
                <p>${this.props.value.price}</p>
              </div>
            </div>) : null}  
        </button>
      </Link>
    );
  }
}

我的问题是......假设我不想在这个组件呈现的图像上添加覆盖，而是想更改另一个组件呈现的图像，而不是通过应用覆盖 div，而是通过更改一些 CSS 设置说图像，就像应用过滤器:filter: grayscale(100%)。于是就有了这张图:

<img className="PicBox" src={this.state.img[sid-1]} />

由另一个组件渲染。

以下是我认为的策略可能是:

让我的原始组件(我悬停的那个)有一个 Prop “状态”，它跟踪我是否悬停在它上面，就像我上面做的那样。

在呈现 ImageX 的另一个组件中，我需要以某种方式访问​​ Hover 组件的属性，并检查其状态，以决定如何呈现图像(是否使用灰度)。

如何在另一个组件中访问悬停组件的状态？

(或者如果我的策略关闭，将不胜感激)

Answer 1

只要您不使用某些状态管理库，例如 redux 或 flux，并且您想要访问组件之间的状态，您就需要在这些组件之间有一个共同的父级。最后你有这样的东西(伪代码):

ParentComponent {
   hoverHandler(isHover) {
       this.childIsHover = isHover;
   }
   render() {
        <hoverComponent onHover={this.hoverHandler} />
        <imageComponent overlay={this.childIsHover} />
   }
}