如何使用useRef修改ref.current.children的内容？

你这段代码无法修改内容的核心原因是混淆了React虚拟DOM元素和真实DOM节点：

• aRef.current拿到的是真实的DOM节点，它的children是DOM元素集合，不是React虚拟元素；
• React.Children.map是用来处理React虚拟元素的工具方法，不能直接作用于真实DOM；
• 直接给node.children赋值不符合DOM操作规范，而且React的虚拟DOM会维护视图一致性，这种修改不会被React追踪，自然看不到效果。

下面给出两种可行的实现方式：

方式一：用React状态控制（推荐，符合React设计范式） #

React是数据驱动视图的框架，通过状态来控制内容是最规范的做法，代码更易维护且避免DOM操作的潜在问题：

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

const MyApp = () => {
  // 用状态管理文本内容
  const [texts, setTexts] = useState(['to be edited 1', 'to be edited 2']);

  useEffect(() => {
    setTimeout(() => {
      // 修改状态触发视图更新
      setTexts(texts.map(() => 'Edited'));
    }, 1000);
  }, []);

  return (  
    <View>  
      {texts.map((text, index) => (
        <Text key={index}>{text}</Text>
      ))}
    </View>
  );
}

方式二：直接操作真实DOM（不推荐） #

如果非要通过ref操作DOM实现，需要直接修改真实DOM元素的文本内容，注意这种方式违背React的设计理念，仅在特殊场景下使用：

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

const MyApp = () => {
  const aRef = useRef();
  
  useEffect(()=> {
    setTimeout(() => {
      const container = aRef.current;
      // 遍历容器的真实DOM子元素，修改文本
      Array.from(container.children).forEach(child => {
        // 针对Text组件对应的DOM标签（RN或Web环境可能有差异，需根据实际调整）
        if (child.tagName.toLowerCase() === 'text') {
          child.textContent = 'Edited';
        }
      });
    }, 1000)
  }, [])

  return (  
    <View ref={aRef}>  
      <Text>to be edited 1</Text> 
      <Text>to be edited 2</Text> 
    </View>
  );
}

内容的提问来源于stack exchange，提问作者Steve.C