相关疑难解决方法(0)

我有一个外部(对组件),可观察的对象,我想听取更改.当对象更新时,它会发出更改事件,然后我想在检测到任何更改时重新呈现组件.

使用顶级React.render这是可能的,但在一个组件中它不起作用(这有一定意义,因为该render方法只返回一个对象).

这是一个代码示例:

export default class MyComponent extends React.Component {

  handleButtonClick() {
    this.render();
  }

  render() {
    return (
      <div>
        {Math.random()}
        <button onClick={this.handleButtonClick.bind(this)}>
          Click me
        </button>
      </div>
    )
  }
}

单击按钮会在内部调用this.render(),但这不是实际导致渲染发生的原因(您可以看到此操作因为创建的文本{Math.random()}不会更改).但是,如果我只是打电话this.setState()而不是this.render(),它可以正常工作.

所以我想我的问题是: React组件需要有状态才能重新渲染吗？有没有办法强制组件按需更新而不改变状态？

如何显示我自己的加载程序而不是空白屏幕？例如，Tweeter 在页面加载时显示徽标，对于 Facebook、Google AdSense 等也是如此。看看这个 Gif，我想要在 Next Js 中出现类似的内容。

我想这与 _document.js 有关。React js 有一个类似的问题（在 index.html 中渲染加载器），但我不知道如何在下一个 js 中做到这一点。

我在nextjs新和使用nextjs v9.3，next-redux-wrapper v5，@material-ui/core v4.2，和custom express server。

我正在尝试在我的 Nextjs 应用程序中更改路由时实现加载屏幕，因此我使用成帧器运动在页面之间进行转换并且工作正常，但现在如何在更改路由时使用加载组件？

我使用了这些方法，但没有用：

• 下一个 js 页面转换时的加载屏幕
• 如何使用加载组件而不是 nprogress？

我目前的实现如下：

_app.js

import React, { useEffect } from "react";
import { ThemeProvider } from "@material-ui/core/styles";
import { CssBaseline } from "@material-ui/core";
import { theme } from "../lib/theme";
import withRedux from "next-redux-wrapper";
import { Provider } from "react-redux";
import reduxStore from "../store/store";
import { PersistGate } from "redux-persist/integration/react";
import { AnimatePresence } from …

如何使用 Next JS 在同一 Web 应用程序的转换之间创建加载程序页面？

现在，在开发环境中，页面有正常的过渡，这意味着 CSS 已正确应用于每个页面。当将应用程序构建到生产环境时，问题就开始了，例如，当我单击具有链接组件到另一个页面的按钮时，它会显示如下 1 或 2 秒：

1 或 2 秒后，它会相应地呈现：

很抱歉问了这个模糊的问题，但我不知道从哪里开始解决这个问题，我想它会通过两种可能的解决方案来解决：

1. 页面转换之间的加载页面。
2. 在 _app.js 或 _document.js 上做一些事情，但现在我不知道如何开始在这里查找。