Как правильно выбрать все элементы списка в соответствии со способом

Question

Я пытаюсь добавить событие парения в каждый элемент списка в моем приложении React / Gatsby. Когда элемент li наведен, я хочу изменить цвет другого элемента, в данном случае элемента "Ball".

Итак, я устанавливаю ссылку на родителя ul примерно так:

let ulRef = useRef()

И добавляю ссылку на jsx:

<div>
  <div className="ball">Ball</div> // Element I want to change when li is hovered
  <ul ref={ulRef}>
    <li>
     <a href="#">Item</a>
    </li>
    <li>
     <a href="#">Item</a>
    </li>
    <li>
     <a href="#">Item</a>
    </li>
    <li>
     <a href="#">Item</a>
    </li>
  </ul>
</div>

Что является правильным способ выбора всех элементов li? Я попытался использовать querySelectorAll:

let listItems = ulRef.current.querySelectorAll("li")

Кажется, это работает, но после повторного запуска проекта я получаю эту ошибку: TypeError: Cannot read property 'querySelectorAll' of undefined

Answer 1

На основании комментариев

Вроде. При наведении указателя мыши на каждый элемент списка я хочу изменить цвет фона элемента Ball на diff.

и

Хорошо, спасибо. Я создаю функциональный компонент, так что придется реорганизовать ваш код.

Я думаю, что это настолько просто, насколько это возможно:

const App = () => {
  const [ballColor, setBallColor] = React.useState();
  return (
    <div>
      <div style={{ backgroundColor: ballColor }}>Ball</div>
      <ul>
        <li onMouseOver={() => setBallColor("purple")}>Purple</li>
        <li onMouseOver={() => setBallColor("orange")}>Orange</li>
        <li onMouseOver={() => setBallColor("lightgoldenrodyellow")}>Light Goldenrod Yellow</li>
      </ul>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("react"));

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