相关疑难解决方法(0)

我怎样才能得到windowWidth,windowHeight,pageWidth,pageHeight,screenWidth,screenHeight,pageX,pageY,screenX,screenY将在所有主要浏览器工作？

为什么我应该使用requestAnimationFrame而不是setTimeout或setInterval？

这个自我回答的问题是一个文档示例.

我几次遇到这个问题，想知道是否有解决这个问题的方法。我的问题发生在Chrome移动应用上。在那里，您可以向下滚动一点，地址栏消失。到目前为止，很好，让我们举一个例子：
容器height设置为100vh。

如您所见，底部被切除。

当我向下滚动时，它看起来像这样：

现在看起来不错。因此，很明显，Chrome将地址栏的高度计算为视口高度。所以我的问题是：

有没有办法，不管有没有地址栏，它看起来都一样？这样容器会膨胀吗？

我有一个反应组件需要提前知道它的尺寸,然后再渲染自己.

当我在jquery中创建一个小部件时,我可以$('#container').width()在构建组件时提前获取容器的宽度.

<div id='container'></div>

这些容器的尺寸在CSS中定义,以及页面上的一堆其他容器.谁在React中定义了组件的高度和宽度以及位置？我已经习惯了CSS,并能够访问它.但在React中,我似乎只能在组件渲染后访问该信息.

我试图在某个视口宽度的组件上运行测试.我正在做以下事情,但这似乎没有改变它:

test('Component should do something at a certain viewport width.', () => {
    global.innerWidth = 2000;
    const component = mount(<SomeComponent />);
    ...
});

我还发现了一篇文章,解释了如何使用JSDom来实现它,但是当Jest现在随JSDom提供时,我想知道是否有本机解决方案.

https://www.codementor.io/pkodmad/dom-testing-react-application-jest-k4ll4f8sd

伙计们，我在react-slick滑块方面遇到了问题。我在滑块上渲染卡片取决于数组长度。我还渲染自定义next和previous按钮，触发next和previous功能来更改幻灯片。我也想让这个滑块响应。这意味着它具有根据定义的设置滚动幻灯片的功能。

我为断点定义的设置：

992 > 幻灯片滚动 = 3

577 - 991 幻灯片滚动 = 2

0 - 576 幻灯片滚动 = 1

next没有向前滑动时该按钮将被禁用，当没有后向滑动时该previous按钮将被禁用。为了实现此功能，有一个名为 afterChange 的函数可返回幻灯片的当前活动索引。所以我在state. 但我认为我的next按钮逻辑不正确。

我的问题是什么？

• refresh调整窗口大小时是否有任何方法可以调整滑块，因为幻灯片没有根据breakpoints?

• 即使前面没有幻灯片，该next按钮也不会在断点处禁用(0 - 576)。

• 当用户更改单张幻灯片然后调整窗口大小以移动到下一张幻灯片时，该Next按钮将变为非活动状态。

我认为问题在于我写在renderArrows函数内部的逻辑。

看到这个：

代码沙盒：查看此

代码：

import React, { useState, useRef } from "react";
import Slider from "react-slick";

// Constant Variables
// …

我希望能够在达到给定的屏幕尺寸时更改布局，这样我就可以更改网站在移动视图上的外观。

目前我的反应站点使用水平滚动包水平滚动

我尝试使用反应响应包来实现此功能，该包允许我运行媒体查询，但两个包之间似乎存在冲突。

因此，我希望我的网站在全屏（桌面和表格）时水平滚动，然后在移动视图中从上滚动到底部。我该怎么做？

class Home extends React.Component{
constructor(props) {
    super(props);
    this.state = {};
}

componentWillMount() {
    this.setState({
        home: projectsData.filter( p => p.name === "homepage" ),
        galleryImages: [
            ImgOne,
            ImgTwo,
            ImgThree,
            ImgFour,
            ImgFive,
            ImgSix
        ]
    });
}

render(){

    const test = { color: "black", position: "fixed" }
    return(
        <div className="row">
            <Responsive minWidth={992}>
                <HorizontalScroll reverseScroll={true}>
                    <Header />
                    <SplashScreen />
                    <CopyText />
                </HorizontalScroll>
            </Responsive>
        </div>
    );
  }
}

注意：我知道水平滚动包不支持使用百分比调整大小。

我有一个需要获取 DOM 元素大小的类。它运行良好，但是当我调整窗口大小时，它不会更新，直到我更改应用程序中的状态，强制重新渲染。我已经尝试添加this.forceUpdate一个'resize'事件监听器componentDidMount()，但没有奏效。也许我做错了什么？理想情况下，我this.forceUpdate无论如何都想避免使用性能影响。任何解决方法？提前致谢！

我的代码：

class MyComponent extends React.Component {
  state = { x: 0, y: 0 }

  refCallback = (element) => {
    if (!element) {
      return
    }
    const { x, y } = element.getBoundingClientRect()
    this.setState({ x, y })
  }

  render() {
    console.log('STATE:', this.state) // Outputs the correct x and y values.
    return (
      <div ref={this.refCallback}>
        <button>Hello world</button>
      </div>
    )
  }
}

当我实时调整浏览器大小时，我需要获取浏览器的宽度。到目前为止，我已经找到了一个提供宽度的解决方案，但它不是实时的。该值仅在我刷新网页后更新。我如何在调整浏览器大小时获得该值。

我的方法

render() {

var windowWidth = window.innerWidth;

return (

      <div className="body_clr">

        {windowWidth}

      </div>

)
}

如果我刷新页面，此解决方案有效。但是我想在调整大小时获得宽度，因为我必须在特定的屏幕尺寸下执行一个函数。