react，不用useRef、useEffect或点击等事件，如何提取对象里的部分文本内容？

代码如下：

const News = () => {
  let a1 = document.getElementById("a1")
  let b1 = document.getElementById("b1")
  let c1 = document.getElementById("c1")
  let d1 = document.getElementById("d1")
  console.log(a1)
  return (
    <div>
      <span id="a1" className={styles.a1}>
        苹果
      </span>
      <span id="b1" className={styles.b1}>
       雪梨
      </span>
      <span id="c1" className={styles.c1}>
        香蕉
      </span>
      <span id="d1" className={styles.d1}>
        橘子
      </span>
    </div>
  )
}
 

打印结果如下：

<span id="a1" className={styles.a1}>苹果</span>

它是一个object对象：

这边的代码有接近600行，本提问里的代码是抽取了部分代码并修改了内容后发出的。
不使用useRef、useEffect或点击事件等方法，如何才能把打印结果里的“苹果”二字提取出来？试过用find、split、slice、filter等函数，都报错。如何才能实现想要的效果？请在现有代码基础上展示说明。

id选择都能获取到标签了，要拿到里面的文本,直接用原生js都不管用吗？

d1.innerHTML;

往下翻看到你提的另一个问题了，实在不行，你设个定时循环，200毫秒去获取一次，在（获取到就停止循环 || 超过1.5秒还没获取到也停止循环）

• 以下回答由chatgpt基于相关博客总结生成:

  加入的prompt: 请问您要从哪个对象里提取文本内容？能否提供一下该对象的代码或者结构？您想要把提取的文本内容用在什么地方？请提供具体的使用场景和目的。

  由于缺乏具体的场景和需求，我无法给出清晰明确的解决方案。请提供更具体的信息，我将竭尽所能提供帮助。