React: Ref DOM Elements/Nodes выводят информацию, отличную от реальной Ref DOM?

Question

Я использую React Calendar https://www.npmjs.com/package/react-calendar, и я использую их опору ref для управления кнопками даты, чтобы я мог добавлять настраиваемые функции прямо в DOM календаря (только реальный способ для этого я думаю, поскольку их реквизиты ограничены. если вы, ребята, знаете способ лучше, пожалуйста, дайте мне знать, чтобы я мог прекратить использовать этот метод! Кстати, я знаю, что tileClassName для добавления CSS существует, но я хочу иметь некоторые функции зависания, которые я могу Кажется, я не оборачиваюсь для того, чтобы поместить это в tileClassName). Ссылка на календарь React является ссылкой на общий блок календаря, а не на компонент React :(.

Calendar.jsx в react-calendar / src / YearView / Calendar.jsx

      return (
      <div
        className={mergeClassNames(
          baseClassName,
          selectRange && valueArray.length === 1 && `${baseClassName}--selectRange`,
          showDoubleView && `${baseClassName}--doubleView`,
          className,
        )}
        ref={inputRef}
      >
        {this.renderNavigation()}
        <div
          className={`${baseClassName}__viewContainer`}
          onBlur={selectRange ? onMouseLeave : null}
          onMouseLeave={selectRange ? onMouseLeave : null}
        >
          {this.renderContent()}
          {showDoubleView && this.renderContent(true)}
        </div>
      </div>
    );

Теперь в моем настраиваемом календаре js для каждого useEffect я настроил его так, чтобы кнопка перехода к следующему щелчку текущей ссылки меняла состояние месяца, которое зависит от useEffect, так что useEffect можно повторно запускать снова.

      const MainCalendar = () => {
  const [month, setMonth] = useState(0)
  const ref = React.useRef()

useEffect(() => {
    // arrows in ref Change State
    ref.current.getElementsByClassName('react-calendar__navigation__arrow react-calendar__navigation__next-button')[0].onclick = () => {
      setMonth(month + 1)
      return
    }
    console.log(ref.current)
    console.log(ref.current.getElementsByClassName('react-calendar__navigation__label')[0].children[0].textContent)
}, [month])

return(
     <Calendar
          inputRef={ref}/>)
}

Теперь, когда я нажимаю эту кнопку со стрелкой, обведенную красным, повторный запуск действительно происходит, поскольку консоль снова регистрирует два элемента, но если вы проверите мою функцию useEffect, я печатаю как ref.Current, так и ELEMENT в этом ref.Current . Я выбрал этот элемент - месяц / год заголовка (например, июль 2021 года на изображении выше). Теперь консоль правильно печатает текущий ref DOM (первая печать консоли) с новой датой августа 2021 года (поскольку кнопка навигации перемещается на месяц вверх), но когда я обращаюсь к ref DOM с помощью getElementByClassName, кажется, что он печатает предыдущий элемент Ref (вторая печать консоли), а не текущий заголовок элемента Ref, который мне нужен. (например: печать в июле 2021 г., когда это должно быть в августе 2021 г.)

Как я могу исправить это, чтобы элементы Ref, к которым осуществляется доступ в useEffect, были самой последней информацией (в основном, информацией из зарегистрированного ref.current)? Похоже, что это не так, хотя печать ref.current показывает август 2021 года. Мне нужно, чтобы он обновлялся ровно после повторного запуска useEffect, чтобы я мог настраивать условные выражения на основе текущего представленного заголовка, но я могу Не делайте этого прямо сейчас из-за этой дилеммы. Как лучше всего обновлять эти элементы ref? Спасибо

Answer 1

Я нашел решение.

      async function waitForDate(i) {
    function dateChanged() {
      return new Promise(resolve => {
        const observer = new MutationObserver(() => {
          resolve()
        })
        var config = { characterData: true, attributes: false, childList: false, subtree: true }

        observer.observe(ref.current.getElementsByClassName('react-calendar__navigation__label')[0].children[0], config)
      })
    }

    await dateChanged()

    setMonth(month + i)
  }

Я вызвал эту функцию waitForDate внутри метода onclick useEffect.

Я создал асинхронную функцию, которая наблюдает и ожидает, пока элемент ref изменит элемент заголовка. Как только это сработает, я использую Effect для повторного рендеринга всего этого.

Похоже, что в моем предыдущем решении не учитывалось, что текущая ссылка может все еще устареть после нажатия кнопки навигации и повторного запуска useEffect. Итак, я должен сначала подождать и подтвердить, что он изменился с помощью этой функции, которую я использовал.