Доступ к нескольким элементам через один реф Реакт

Question

Я хочу получить доступ к нескольким элементам с помощью функции refs. Затем, после того, как я мог бы перебрать элементы this.tabs. Код ниже не работает, как это исправить, чтобы заставить работать? Решение, которое я использую сейчас, - document.querySelectorAll('tabs'), но для React оно не выглядит правильным.

class Comp extends React.Component {
  constructor(props) {
    super(props);
    
    this.tabs = React.createRef();
  }
  
  componentDidMount() {
    console.log(this.tabs);
  }


  render() {
    return (
      <div>
        <span class="tab" ref={this.tabs}>One</span>
        <span class="tab" ref={this.tabs}>Two</span>
        <span class="tab" ref={this.tabs}>Three</span>
      </div>
    );
  }
}

ReactDOM.render(
  <Comp />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 1

Вы назначаете refs неверный путь. Сделайте это в начале render() метод:

this.tabs = []

ссылки будут назначены через

<span className="tab" ref={(tab) => { this.tabs.push(tab) }}>One</span>

Я надеюсь, вы могли бы позвонить this.tabs по этому делу!