reactjs - 如何添加对 HTMLCollection 项目的反应引用？

Question

我正在尝试访问对 react-markdown 中每个段落/标题的附加引用。但我不知道如何在下面的 c 中添加 ref。

const children = Array.from(div.children)
children?.forEach((c, i) => {
  // c = <p>...</p> or <h1>...</h1>
  // add ref from useRef to c
})

Answer 1

您可以使用 克隆元素ReactcloneElement(element, propsObject, childrenAray)。这保留了克隆元素的 key 和 ref 道具。更多信息在这里：https ://reactjs.org/docs/react-api.html#clonelement

或者，您可以这样做：

const children = Array.from(div.children)
children?.forEach((c, i) => {
  return <c.type {...c.props} ref={yourRef} key={i}>{c.props.children}</c.type>
})