React/Redux：悬停一个组件时，更改所有组件的颜色

Posted 2023-02-22

【中文标题】React/Redux：悬停一个组件时，更改所有组件的颜色

【英文标题】：React/Redux: On Hover of one Component, change color of all Components

【发布时间】：2018-12-28 11:18:07

【问题描述】：

让<Word /> 成为一个简单的函数式组件（没有状态），它需要一些道具并显示一个单词。

<Word group=1 />
<Word group=2 />
<Word group=2 />
<Word group=1 />
<Word group=2 /> //There might be many more groups etc.

悬停其中一个<Words /> 时，我想突出显示（将背景颜色更改为黄色或其他）所有同一组中的单词。不只是悬停的词，而是那个词+同一组中的所有词。

我本来想用纯 CSS 来做这个，但这显然是不可能的。我怎么能以最小的方式用 React 做这样的事情？

【问题讨论】：

您可以在有效负载中使用“groupId”调度操作“HOVER_GROUP”。然后，每个 Word 检查它是否与其组匹配并将其背景颜色更改为黄色

【参考方案1】：

import React,  Component  from 'react';
import './App.css';

class App extends Component 

  constructor(props)
    super(props);
        this.state = 
        currentSelectedGroup: 0,
        value: 0
        ;
    this.hoverOff = this.hoverOff.bind(this);
    this.hoverOn = this.hoverOn.bind(this);
    

    hoverOn(selectedGroup)
    this.setState(
      currentSelectedGroup: selectedGroup
    );
    

    hoverOff()
    this.setState( currentSelectedGroup: 0 );
    

    render()
    return(
    <div>
         <Word group=2
      currentSelectedGroup=this.state.currentSelectedGroup
      onMouseEnter= ( ) => this.hoverOn(2) 
      onMouseLeave = this.hoverOff />
   <Word group=1
      currentSelectedGroup=this.state.currentSelectedGroup
      onMouseEnter= ( ) => this.hoverOn(1) 
      onMouseLeave = this.hoverOff
       />
        <Word group=1
      currentSelectedGroup=this.state.currentSelectedGroup
      onMouseEnter= ( ) => this.hoverOn(1) 
      onMouseLeave = this.hoverOff
       />

    <Word group=2
      currentSelectedGroup=this.state.currentSelectedGroup
      onMouseEnter= ( ) => this.hoverOn(2) 
      onMouseLeave = this.hoverOff />
      </div>
      )
    


const Word = (props) => 
  let wordClassName =  props.group == props.currentSelectedGroup  ? 'highLight':'default';
  return (
      <div className=`$wordClassName`
          onMouseEnter= props.onMouseEnter 
              onMouseLeave = props.onMouseLeave>
      This is my Word Group : props.group
      </div>);

  

export default App;

根据需要实现 highLight css 样式。

【讨论】：

但他说他不想使用状态

在我的实现中，Word 可以是无状态组件，只有从父组件接收到的道具。

把Word改成没有状态的功能组件。