React/JS：嵌套子组件取值，forwardRef与state该选哪个？

1. forwardRef方案：可行但不推荐 #

• 技术层面确实可以通过forwardRef逐层传递ref，在MessageBubble组件内更新ref.current来存储消息ID，但这属于ref的误用场景。
• React中ref的设计初衷是获取DOM元素或组件实例，用于DOM操作（比如聚焦、滚动定位）或调用组件内部方法，而非存储业务状态。用ref存业务数据会打破单向数据流模式，代码可读性差，且ref的更新不会触发组件重渲染，后续若依赖该值做渲染逻辑会出现状态不一致的问题。

2. 状态提升+props传递方案：更合适 #

• 这是符合React设计理念的标准做法：
  • 在Chat组件中定义状态，比如const [targetMessageId, setTargetMessageId] = useState(null)。
  • 将setTargetMessageId作为props逐层传递给ChatMessage、MessageBubble组件。
  • 当需要记录某个MessageBubble的ID时，直接在组件内调用setTargetMessageId(messageId)更新状态。
• 优势：状态变化会触发组件重渲染，所有依赖该值的逻辑能同步更新，代码逻辑清晰，符合单向数据流的可预测性。

补充说明 #

如果需要记录多个MessageBubble的属性，可以将state定义为数组或对象（比如const [selectedMessages, setSelectedMessages] = useState([])），同样通过传递更新方法来维护状态。

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