Блог

Главная - Вопросы по программированию - Ширина приложения React не применяется к элементу

Ширина приложения React не применяется к элементу

#javascript #css #reactjs #typescript #tailwind-css

Вопрос:

В моем компоненте есть следующие элементы div:

        <div className={`max-h-5/6 flex flex-row mx-auto`} style={{ width: '100%'}} id="wallViewContainer">
             <div className="h-full w-full my-auto justify-center flex flex-1" data-testid="wallView">
       </div>
       <div className="h-10 pb-8 w-full flex flex-row justify-between items-center" id="bottomDiv">

При каждом рендеринге я проверяю, не переполняет ли div wallView нижнюю часть, если это так, я хочу уменьшить ширину держателя wallViewContainer

   const wallViewDiv = document.querySelector('[data-testid="wallView"]')
  const bottomDiv = document.getElementById('bottomDiv')
  const wallViewContainer = document.getElementById('wallViewContainer')
  var wallRect = wallViewDiv?.getBoundingClientRect();
  var btmRect = bottomDiv?.getBoundingClientRect();

  if (wallRect amp;amp; btmRect amp;amp; wallViewContainer) {
    let currWidth = wallViewContainer?.style?.width?.split('').slice(0, 3).join('')
    const overflow = wallRect.bottom > btmRect.top

    if (overflow) {
      let percentOverflow = ((wallRect.height - btmRect.top) / wallRect.bottom * 100)
      wallViewContainer.style.width = Math.round((parseInt(currWidth) - percentOverflow)).toString()   "%"
    }
    else {
      wallViewContainer.style.width = "100%"
    }
  }

Однако, когда я изменяю свой wallViewContainer.style.ширина к новой ширине, она не применяется и по-прежнему отображается на 100% в инструментах разработки в chrome.

Но как ни странно, если я изменю его, как этот wallViewContainer.style.ширина = «42%», это действительно применимо.

Я проверил, чтобы убедиться, что Math.round((синтаксический анализ(currWidth) — процентный поток)).toString() «%» вычисляет строку с целым числом, за которым следует процент…есть какие-нибудь идеи?

Метки: