用于使某些元素的 props 依赖于另一个元素呈现的 DOM 的 React 模式

Question

我的 React 组件有一个呈现 markdown 资产的元素。 在页面底部，我有一个 facebook 分享按钮，我想将 markdown 内容作为报价传递给该按钮。 获取内容的唯一方法是访问 DOM。 在伪代码中：

return
  <>
    <MarkdowComponent file='some-asset.markdown'/>
    <ShareComponent 
      url={window.location.href} 
      quote={document.querySelector(<<selector targeting elements in rendered markdown>>).textContent}
    />
  </>

我已经对此进行了测试，它似乎有效，但我想知道这是否是一个合适的解决方案。 我可以安全地假设在到达后面的元素之前所有前面的元素都已经在 DOM 中呈现了吗？ 如果<ShareComponent>出现在<MarkdownComponent>之前怎么办？

是否有一种 React 模式可以使某个元素的 props 依赖于另一个元素呈现的 DOM？

最好的问候，维克