小编Eri*_*hat的帖子

我正在使用 RMWC ( https://github.com/jamesmfriedman/rmwc )在网络上使用 ReactJS 和 Google 的 Material 组件。我有一个父组件，其中包含一个图标和一个文本。该图标具有 Material Design 涟漪效果，这意味着当我将其悬停或单击时，会触发动画。

我现在想在我悬停或单击下面的文本时触发相同的效果。

这是组件：

export class Subject extends Component {
constructor(props) {
    super(props)
}

triggerRippleHover() {
    console.log("hovered");
    // HERE
  }

renderSubjectIcon(Icon) {
    return (
        <Icon className="subject-icon" />
    )
  }

render() {
    return (
        <div className="subject-container">
            <Ripple unbounded>
                <div className="subject-icon-container">
                    {this.renderSubjectIcon(this.props.icon)}
                </div>
            </Ripple>
            <span onMouseEnter={this.triggerRippleHover}>{this.props.name}</span>
        </div>
    )
}

基本上，我只想“扩展”触发图标行为的区域（如果有任何意义）。

我一直在广泛搜索，但一直无法找到合适的答案。

非常感谢你的帮助。