Блог

Главная - Вопросы по программированию - ReactJS, useLayoutЭффект с документом, пустые значения

ReactJS, useLayoutЭффект с документом, пустые значения

#reactjs #use-effect

Вопрос:

Я пытаюсь отключить два элемента, проходящих по классу, как это:

 const disableMonthAndYear = () => {
  const cellsMonth = document.getElementsByClassName('ant-picker-month-btn');
  const cellsYear = document.getElementsByClassName('ant-picker-year-btn');
  console.log('cellsMonth', cellsMonth);
  for (let i = 0; i < cellsMonth.length; i  ) {
    console.log('i', i); // not entering here
    cellsMonth[i].disabled = true;
  }
  for (let i = 0; i < cellsYear.length; i  ) {
    cellsYear[i].disabled = true;
  }
};

useLayoutEffect(() => {
  disableMonthAndYear();
}, []);

Я думал об использовании useLayoutEffect , потому что хотел вызвать disableMonthAndYear функцию только тогда, когда DOM был полностью загружен, потому что в console.log('cellsMonth', cellsMonth); я получаю пустые массивы, но когда я нажимаю на них, я вижу значения внутри…
введите описание изображения здесь

С a setTimeout работает нормально, но это не идея, как я должен убедиться, что константа, определенная ими document.getElementsByClassName( , заполнена данными, прежде чем изменять ее disabled свойства?

Комментарии:

1. document Ни в коем случае не используйте document.getElementsByClassName document.getElementsById и так далее. Это ванильный js-материал. Это приемлемо только в первой строке, когда вы выполняете рендеринг DOM. ЕДИНСТВЕННОЕ место, где можно сделать это один раз. Вы используете react не по назначению. Это грязно. Используйте ссылки useRef или, если вы сопоставляете свои таблицы, просто не отображайте их в определенных ячейках, которые не должны отображаться. что угодно! Удалив этот грязный способ, вы также устраните проблему, связанную с тем, что вы не знаете, есть у вас данные или нет, и так далее. Оставьте все, чтобы отреагировать

2. Хорошо, но я не могу добавить ссылку во внешнюю библиотеку, эта библиотека (ant date rangepicker) содержит только классы для своих элементов

3. Итак, вы передаете ему объект с данными? Тогда почему бы просто не отфильтровать данные до того, как вы их передадите, чтобы компонент просто никогда не получал данные, которые вы не хотите отображать?

4. Это не имеет никакого отношения к вопросу. Я хочу отключить для divs из внешней библиотеки, в настоящее время она работает с помощью параметра setTimeout и установки параметра disable true для DOM, но мне интересно, есть ли другой способ сделать это, с ref было бы нормально, если бы все компоненты, где реагируют

5. Каждый компонент в дизайне ant (кажется, то, что вы используете) имеет множество API для его изменения. В том числе для таблиц, чтобы сделать пользовательский рендеринг определенного столбца, означающего для ваших month year столбцов и, вы можете добавить простую if проверку, чтобы отрисовать его или нет, или, если вы хотите отрисовать, но с disabled атрибутом — вы тоже можете это сделать. Трудно точно ответить, как помочь, когда мы не знаем точной ситуации. Какому компоненту вы передаете информацию? что он делает? Потому что то, что вы нам предоставили, — это грязный код реакции, который не следует использовать. пожалуйста, обновите свой пост с дополнительной информацией

Метки: , ,