javascript - 在父点击时将类添加到子组件

Question

我有一个像这样的功能性 React 组件:

const RefreshButton = () => (

        <IconButton >
            <RefreshIcon />
        </IconButton>

)

我需要的是在单击 IconButton (onClick) 时将动态类属性分配给子 RefreshIcon 节点，运行绑定(bind)到的 CSS 动画该类并在动画结束时删除该类 (onAnimationEnd)。

我的问题是我完全不知道如何从 onClick 和 onAnimationEnd 回调中引用子组件。

我遇到过that主题，但这都是关于基于类的组件，我不太确定如何采用建议的解决方案，所以如果你能指出正确的方向，我将不胜感激。

Answer 1

有很多方法可以解决这个问题。我会用ref's并让类更改触发动画。

import React, { useRef } from 'react'

const RefreshButton = () => {
  const buttonInput = useRef(null);

  const onButtonClick = () => {
    // Do animations based on class change
    buttonInput.classList.add()
  };

  return (
    <IconButton onClick={onButtonClick} >
      <RefreshIcon ref={buttonInput} />
    </IconButton>
  )
}