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

让

成为一个简单的功能组件（没有状态），它需要一些道具并显示一个单词

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

//可能会有更多的团体等等。

悬停其中一个

，我想突出显示（将背景色更改为黄色或其他颜色）同一组中的所有单词。不仅仅是单词悬停，而是该单词+同一组中的所有单词

我最初只想用CSS来实现这一点，但这显然是不可能的。我如何以最小的方式使用React做类似的事情？

import React，{Component}来自“React”；
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;

导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
currentSelectedGroup:0，
数值：0
};
this.hoverOff=this.hoverOff.bind（this）；
this.hoverOn=this.hoverOn.bind（this）；
}
悬停（selectedGroup）{
这是我的国家({
currentSelectedGroup:selectedGroup
});
}
霍弗夫{
this.setState（{currentSelectedGroup:0}）；
}
render（）{
返回(
这个.hoverOn（2）}
onMouseLeave={this.hoverOff}/>
这个.hoverOn（1）}
onMouseLeave={this.hoverOff}
/>
这个.hoverOn（1）}
onMouseLeave={this.hoverOff}
/>
这个.hoverOn（2）}
onMouseLeave={this.hoverOff}/>
)
}
}
常量单词=（道具）=>{
让wordClassName=props.group==props.currentSelectedGroup？'highLight'：'default'；
返回(
这是我的单词组：{props.Group}
);
}
导出默认应用程序；

---

根据需要实现突出显示css样式。

您可以在有效负载中发送带有“groupId”的操作“HOVER\u GROUP”。然后，每个单词检查它是否与其组匹配，并将其背景颜色更改为黄色，但他说他不想使用state在我的实现中，单词可以是无状态组件，只有从父组件接收到的道具。将单词更改为不带状态的功能组件。