反应进度条不可见？答案

【问题标题】：React Progressbar not Visible?反应进度条不可见？
【发布时间】：2020-10-10 13:18:13
【问题描述】：

我在第三方库的帮助下创建了一个 React 进度条

import React from "react";
import { css } from "@emotion/core";
import ClipLoader from "react-spinners/ClipLoader";
 
 
// Can be a string as well. Need to ensure each key-value pair ends with ;
const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;
 
class AwesomeComponent extends React.Component {
  constructor(props) {
    
    super(props);
    this.state = {
      loading: true
    };
  }
 
  render() {
    return (
        
      <div className="sweet-loading">
        <ClipLoader
          css={override}
          size={150}
          color={"#123abc"}
          loading={this.state.loading}
        />
      </div>
    );
  }
}
export default AwesomeComponent;

然后导入 index.js 文件

import AwesomeComponent from './awesomeComponent.js';

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
      <AwesomeComponent />
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

在我的应用程序中，我想在从 nodejs api 加载数据或单击任何按钮时显示此进度条..但在与进度条相关的 GUI 中看不到任何内容。

【问题讨论】：

usePromiseTracker 是 react-hook 吗？也许你需要使用函数组件而不是类
@RamanNikitsenka 是的，但是很抱歉，它没有在代码中的任何地方使用。也编辑了代码库。
我已经创建了一个示例来处理上面的代码，我在那里看到了微调器。 codesandbox.io/s/modern-monad-4tipc?file=/src/…。您能否描述一下您期望的行为？
@SudobhJoshi 我更新了示例并添加了更改状态的按钮codesandbox.io/s/modern-monad-4tipc?file=/src/…
你可以添加这个作为答案。

标签： reactjs progress-bar

【解决方案1】：

如果您对react-promise-tracker 使用基于类的组件，那么您需要使用 HOC promiseTrackerHoc：

import React from "react";
import { css } from "@emotion/core";
import ClipLoader from "react-spinners/ClipLoader";
import { promiseTrackerHoc } from "react-promise-tracker"; // <--------- HERE
  
// Can be a string as well. Need to ensure each key-value pair ends with ;
const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;
 
class AwesomeComponent extends React.Component {
  constructor(props) {
    
    super(props);
    this.state = {
      loading: true
    };
  }
 
  render() {
    return (
        this.props.promiseInProgress && // <--------- HERE
        <div className="sweet-loading">
            <ClipLoader
            css={override}
            size={150}
            color={"#123abc"}
            loading={this.state.loading}
            />
        </div>
    );
  }
}
export default promiseTrackerHoc(AwesomeComponent); // <--------- HERE

工作演示：

注意：

您可以结帐DOC，因为他们已经解释了一切，我认为你可以帮助你找出你想要的任何场景实施

【讨论】：

感谢您的回答假设我不会在代码库中使用react-promise-tracker 在这种情况下只有这么多代码不起作用？实际上我试图实现的每个按钮/链接点击或数据加载应该自动支持 Spinner ..你回答给Line 24:9: 'props' is not defined no-undef
@SubodhJoshi，这是 spinner/loader 的代码，这只是一次代码，那么您只需要使用trackPromise，无论您需要显示 loader，您都必须把它放在哪里，对不起，我在props之前错过了this，
感谢我是 rectjs 的新手。在 JSF 中，我们有设施添加一个常见的地方 Spinner，它将适用于所有其他页面，所以我一直在寻找相同的。
@SubodhJoshi，请看一遍，npmjs.com/package/react-promise-tracker，我想这会清除你所有的疑惑。
所以你的意思是在写完一个组件后我必须import { trackPromise } from 'react-promise-tracker'; 并在我想显示 Spinner 的每个 js 文件中添加promiseTrackerHoc？

【解决方案2】：

在此示例中，您可以看到如何更改微调器的可见性，只需单击按钮即可更改本地状态

https://codesandbox.io/s/modern-monad-4tipc?file=/src/AwesomeComponent.js

【讨论】：