React refs的问题

Question

我对React ref感到困惑-创建和警告。

这是我的情况。

<MyContent>
  <ul>
    <li>
      <ScrollToAnchor href="#target-1">Go to target 1</ScrollToAnchor>
      <ScrollToAnchor href="#target-2">Go to target 2</ScrollToAnchor>
    </li>
  </ul>

  <h1 id="target-1" ref="target-1">Target 1</h1>
  <h1 id="target-1" ref="target-2">Target 2</h1>
</MyContent>

在MyContent的render方法中，我将内容输出为this.props.children。

我似乎无法在target-1组件中选择target-2或ScrollToAnchor，因为它们似乎超出了范围。什么是实现这一目标的适当机制？我想避免使用document.querySelector(id)，因为它似乎不是React方式。

如果需要提供更多代码，请告诉我。