React函数组件中如何将触发事件的元素传入函数？

• 首先纠正核心错误：函数组件里不存在this，类组件的this逻辑完全不适用于函数组件，所以你传this必然报错，别再用类组件的思路套函数组件了。

• 如果只是想把FontAwesomeIcon的JSX元素作为参数传入markATaskAsDone，直接在调用函数时传入即可：

  // 示例：在点击事件中调用函数并传入图标元素
  <button onClick={() => markATaskAsDone(<FontAwesomeIcon icon="check" />)}>
    标记完成
  </button>
  
  // 对应的函数定义
  const markATaskAsDone = (iconElement) => {
    // 这里可以直接使用传入的FontAwesomeIcon元素
    console.log(iconElement);
  };
  

• 如果你的需求是操作这个图标的DOM节点（比如修改样式、获取尺寸等），要改用useRef钩子实现：

  import { useRef } from 'react';
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  
  const YourComponent = () => {
    const iconRef = useRef(null);
  
    const markATaskAsDone = () => {
      // 通过ref获取DOM节点后操作
      if (iconRef.current) {
        iconRef.current.style.color = '#2ecc71';
      }
    };
  
    return (
      <div>
        <FontAwesomeIcon ref={iconRef} icon="check" />
        <button onClick={markATaskAsDone}>标记任务完成</button>
      </div>
    );
  };
  

• 你之前尝试把this转成JSX.Element完全没必要，函数组件里根本没有this这个概念，用上述直接传元素或ref的方式就能解决问题。

内容的提问来源于stack exchange，提问作者Justin Chan