主页 / 问题

问题[react.js]

Martin Hope
legkiy
Asked: 2022-07-25 15:48:44 +0800 CST
  • 0

如何拉伸主 div 元素以填充屏幕？在纯 html 和 css 上，这是通过将样式“height:100%”添加到 html、body 和必要的 div 元素来完成的，此方法不适用于 react。

UPD

在其中插入组件的 js 文件：

import React, { Component } from "react";
import Container from "./components/Container";
import Head from "./components/Head";

export default class App extends Component {
  render() {
    return (
      <div>
        <Head />
        <Container />
      </div>
    );
  }
}

js 文件，其中包含一个带有“容器”类的组件，我正在尝试拉伸它的高度：

import React, { Component } from "react";
import YaMap from "./YaMap";

export default class Container extends Component {
  render() {
    return (
      <div className="container box-80">
        <h1 className="title">
          текст
        </h1>
        <div className="flex-box">
          <div className="discription">
            <p>
              текст
            </p>
          </div>
          <div className="ya-map" id="ya-map">
            <YaMap />
          </div>
        </div>
      </div>
    );
  }
}

我试图在其中设置元素高度的 css 文件：

    html,
    body {
      height: 100%;
      font-family: "PT Sans", "Calibri", sans-serif;
      background: linear-gradient(170deg, white, rgb(188, 205, 212)) fixed;
    }

    .container {
      height: 100%;
      background-color: white;
    }

除高度外，所有样式均已设置。常规 html 工作的相同条件

react.js
Martin Hope
webphp
Asked: 2022-07-23 12:43:39 +0800 CST
  • 1

我不明白怎么回事，我观察到一个奇怪的效果。当用户接近页面底部时，我需要加载内容。
我有一个禁止或允许加载内容的状态，它在少于某个数量的时候被激活到底部。这是状态：

const [fetching, setFetching] = useState(true);
useEffect(() => {
    if(fetching) {
         // тут обновляю состояние которое добавляет новый контент
    }
}, [fetching])

还有滚动状态

useEffect(() => {
    document.addEventListener("scroll", scrollHandler)

    return () => document.removeEventListener("scroll", scrollHandler)

}, [])

好吧，scrollHandler 本身：

const scrollHandler = (e: any) => {
    if(e.target.documentElement.scrollHeight - (e.target.documentElement.scrollTop + window.innerHeight) < 100 ) {
        setFetching(true)
    }
}

事实是，如果您设置setFetching(true)小于 100px 到页面末尾时，一切正常，但是使用此值，用户可以看到内容是如何加载的，但是您想隐藏这一时刻，为此您需要将值增加，例如，增加到 1000

const scrollHandler = (e: any) => {
    if(e.target.documentElement.scrollHeight - (e.target.documentElement.scrollTop + window.innerHeight) < 1000 ) {
        setFetching(true)
    }
}

而这里有趣的开始了，内容可以随时停止加载，我不明白这是怎么回事，或者是因为addEventListener和removeEventListener批量操作，还是其他一些原因。如何解决问题或以不同的方式实施？

scroll react.js