React Native中如何用useRef存储函数组件引用以实现遍历操作？

我在React Native应用中有如下代码：

export default function MyScreen() {

  const componentRefs = useRef([]);

  return (
            <View >
              {myArray.map(
                (wc, index) =>
                  (
                    <MyObject
                      key={index}
                      ref={el => componentRefs.current[index] = el}
                      index={index}
                      // other props
                    />
                  )
              )}
            </View>
  );
}

每个MyObject实例展示一个单词，我希望添加功能：点击按钮时依次高亮每个单词并播放其发音音频。为此我需要在父组件MyScreen中存储每个MyObject实例的引用，以便后续遍历所有展示的单词。

我尝试用useRef创建数组存储引用，如上述代码所示。作为初步测试，我写了一个按钮处理函数遍历componentRefs并打印：

componentRefs.current.forEach((x) => console.log(x));

但控制台无输出，还出现警告：

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

请问存储这些引用以实现所需功能的最佳方法是什么？

出现这个问题的核心原因是MyObject是函数组件，默认不支持接收ref传递——只有类组件或用React.forwardRef包装的函数组件才能接收ref。下面提供两种可行方案：

方案一：用forwardRef传递ref（适合需要直接操作组件元素的场景） #

1. 改造MyObject组件 #

用forwardRef包装MyObject，把ref传递给内部负责展示的原生组件（比如包裹单词的Text）：

import { forwardRef } from 'react';

const MyObject = forwardRef((props, ref) => {
  // 将ref绑定到实际展示单词的Text组件上
  return (
    <Text ref={ref} style={/* 你的基础样式 */}>
      {props.word}
    </Text>
  );
});

export default MyObject;

如果MyObject内部有多层结构，确保把ref绑定到你需要操作的核心元素上（比如负责高亮的容器）。

2. 父组件中使用ref实现功能 #

现在componentRefs会正确存储每个MyObject对应的元素引用，你可以遍历这些ref实现高亮和音频播放：

export default function MyScreen() {
  const componentRefs = useRef([]);

  const handlePlaySequence = async () => {
    for (let i = 0; i < componentRefs.current.length; i++) {
      const wordElement = componentRefs.current[i];
      if (!wordElement) continue;

      // 高亮当前单词：用setNativeProps直接修改原生样式，避免组件重渲染
      wordElement.setNativeProps({
        style: { backgroundColor: 'yellow', fontWeight: 'bold' }
      });

      // 播放对应音频（假设myArray中存储了音频地址）
      const audio = new Audio(myArray[i].audioUrl);
      await audio.play();

      // 播放完成后取消高亮
      await new Promise(resolve => setTimeout(resolve, 300));
      wordElement.setNativeProps({
        style: { backgroundColor: 'transparent', fontWeight: 'normal' }
      });

      // 间隔一段时间再处理下一个单词
      await new Promise(resolve => setTimeout(resolve, 500));
    }
  };

  return (
    <View>
      <Button title="依次播放并高亮" onPress={handlePlaySequence} />
      {myArray.map((wc, index) => (
        <MyObject
          key={index}
          ref={el => componentRefs.current[index] = el}
          word={wc.word}
          // other props
        />
      ))}
    </View>
  );
}

方案二：用状态控制高亮（更符合React状态驱动理念） #

如果你的需求只是高亮单词，不需要对组件元素做复杂操作，可以不用ref，通过父组件状态传递控制：

1. 父组件维护高亮状态 #

export default function MyScreen() {
  const [currentHighlightIndex, setCurrentHighlightIndex] = useState(-1);

  const handlePlaySequence = async () => {
    for (let i = 0; i < myArray.length; i++) {
      setCurrentHighlightIndex(i);
      // 播放音频
      const audio = new Audio(myArray[i].audioUrl);
      await audio.play();
      // 等待音频播放完成+高亮持续时间
      await new Promise(resolve => setTimeout(resolve, 800));
    }
    // 重置高亮状态
    setCurrentHighlightIndex(-1);
  };

  return (
    <View>
      <Button title="依次播放并高亮" onPress={handlePlaySequence} />
      {myArray.map((wc, index) => (
        <MyObject
          key={index}
          word={wc.word}
          isHighlighted={currentHighlightIndex === index}
          // other props
        />
      ))}
    </View>
  );
}

2. MyObject组件根据props切换样式 #

const MyObject = ({ word, isHighlighted }) => {
  const textStyle = {
    // 基础样式
    fontSize: 16,
    ...(isHighlighted && { backgroundColor: 'yellow', fontWeight: 'bold' })
  };

  return <Text style={textStyle}>{word}</Text>;
};

这种方案更简洁，避免了ref操作，适合简单的状态控制场景。

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