react.js - react18如何获取传入组件的节点信息并进行修改，类似vue的自定义指令El？

Question

之前一直是vue的开发者，最近学习react直接从18开始学起，最早的class类组件有了解但是没有实际采用，想着直接学最新的。
现在有个问题，class类在写hoc的时候，是可以通过反向继承获取传入组件的节点以及各种数据，从而做到拦截或修改。但是我观察hook写法是没有办法实现super这个东西，那么我该如何实现模拟vue的自定义指令呢。
贴出一个我需要实现的例子：

app.directive('initval', {
    mounted: (el, binding) => {
      const val = +(binding.value)?.toFixed(binding.modifiers.noFix ? 4: 2)
      let plus = ''
      let color = ''
      if (isNaN(val) || +val === 0) {
        el.innerText = '0.00%'
      } else {
        if (+val > 0) {
          plus = '+'
          color = 'red'
        } else if (+val < 0) {
          color = 'green'
        }
        // 是否需要改颜色
        if (!binding.modifiers.noColor && color) {
          el.style.color = EColor[color as keyof typeof EColor]
        }
        // 纯改颜色
        if (binding.modifiers.pureColor) {
          return
        }
        // 是否需要箭头
        let preHtml = ''
        if (binding.modifiers.arrow) {
          preHtml = color === 'red'
            ? '<i class="up"></i>'
            : color === 'green'
              ? '<i class="down"></i>'
              : ''
        }
        el.innerHTML = `${preHtml}${binding.modifiers.noColor ? '' : plus}${val}%`
      }
    }
  })

逻辑是次要，主要我怎么获取到这个innerText并返回一个新的html出去呢？

Answer 1

import React, { useRef, useEffect } from 'react';

const CustomDirectiveExample = ({ value, noColor, noFix, arrow, pureColor }) => {
  const el = useRef(null);

  useEffect(() => {
    const val = +(value)?.toFixed(noFix ? 4 : 2);
    let plus = '';
    let color = '';

    if (isNaN(val) || +val === 0) {
      el.current.innerText = '0.00%';
    } else {
      if (+val > 0) {
        plus = '+';
        color = 'red';
      } else if (+val < 0) {
        color = 'green';
      }

      if (!noColor && color) {
        el.current.style.color = color;
      }

      if (!pureColor) {
        let preHtml = '';

        if (arrow) {
          preHtml =
            color === 'red'
              ? '<i class="up"></i>'
              : color === 'green'
              ? '<i class="down"></i>'
              : '';
        }

        el.current.innerHTML = `${preHtml}${noColor ? '' : plus}${val}%`;
      }
    }
  }, [value, noColor, noFix, arrow, pureColor]);

  return <div ref={el}></div>;
};

export default CustomDirectiveExample;