Question

在我的react应用程序中，我具有某些组件，将它们悬停时，不仅需要突出显示悬停的元素，还需要突出显示其他完全不相关的组件。

执行此操作的一种方法是强制在最顶层的容器上进行更新，但是一旦元素数量开始大量增长，它的性能就会非常差，所以我的问题是：是否可以通过某种方式“链接”多个组件这样，只要一个组件更新，它就会通知其相关组件？想到的另一种可能性是存储对组件对象的引用并访问__self字段。但这看起来不是很惯用，所以我想知道是否还有另一种方法？

Answer 1

由于要在一个组件上悬停多个组件，您可能会保持一个状态，该状态已设置为onHover在这些组件的公共父组件中。使用此状态，您可以在这些组件上添加一个类

state= {
   hovered: false
}

onHover = () => {
    this.setState({hovered: true});
}

onHoverOut = () => {
    this.setState({hovered: false});
}

现在在子组件中，您可以使用onMouseEnter

onMouseEnter = () => {
   this.props.onHover();
}

onMouseLeave = () => {
   this.props.onHoverOut();
}

，您可以像这样使用悬停的值

<div className={classnames({[hovered]: this.props.hovered})} />

在React中同步多个不相关的组件

1 个答案: