Question

我的next-js应用程序渲染出现问题。实际上，如果用户在手机上进行咨询，我会尝试制作一个没有相同渲染的响应式页面。当我在Chrome上进行测试时，它工作得很好：
当我从大屏幕开始时，然后减小窗口，一切正常。但是，当我的窗口很小并且刷新它时，渲染就不同了，看起来元素混合在一起了。

为您展示我的代码，
我有一个数组，其中包含要显示的所有容器：

const AllContainers = [
    <Container title="Immatriculation" onClick={handleClick}>
      <Text>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, odit aliquam. Qui possimus
        ratione rerum quasi. Nihil labore a ea recusandae quo dolorum sit earum obcaecati! Optio
        porro culpa animi.
      </Text>
    </Container>,
    <Container title="Permis" key={1} onClick={handleClick}>
      <Text>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, odit aliquam. Qui possimus
        ratione rerum quasi. Nihil labore a ea recusandae quo dolorum sit earum obcaecati! Optio
        porro culpa animi.
      </Text>
    </Container>,
    <Container title="Conformité" onClick={handleClick}>
      <Text>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, odit aliquam. Qui possimus
        ratione rerum quasi. Nihil labore a ea recusandae quo dolorum sit earum obcaecati! Optio
        porro culpa animi.
      </Text>
    </Container>,
    <Container title="Assurance" onClick={handleClick}>
      <Text>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, odit aliquam. Qui possimus
        ratione rerum quasi. Nihil labore a ea recusandae quo dolorum sit earum obcaecati! Optio
        porro culpa animi.
      </Text>
    </Container>,
  ]

我想在幻灯片中显示它们：

            <SlideShowDiv>
              <Row className="align-items-center justify-content-center">
                <Col xs="auto">
                  <a
                    className="prev"
                    onClick={() => {
                      plusSlides(-1)
                    }}
                  >
                    <Previous />
                  </a>
                </Col>
                {AllContainers.map((Container, index) => {
                  return (
                    <Col
                      xs={isVerySmallScreen ? "8" : "auto"}
                      className={shownSlide === index + 1 ? "shownSlide fade" : " hiddenSlide"}
                      key={index}
                    >
                      {Container}
                    </Col>
                  )
                })}
                <Col xs="auto">
                  <a
                    className="next"
                    onClick={() => {
                      plusSlides(1)
                    }}
                  >
                    <Next />
                  </a>
                </Col>
              </Row>
            </SlideShowDiv>

before refreshing, I get this render

and after, I get this one

如您所见，似乎元素混合在一起，刷新后我的前一个箭头位于Container元素中，而我的代码中则没有。此外，似乎链接到className =“ hiddenSlide”的css属性不再被浏览器获取，因为我仍然可以看到具有该className的容器。

您知道我该如何解决此问题？预先感谢！

Next js刷新后无法正确呈现页面

0 个答案: