React看不到？

Question

我在第三方库的帮助下创建了一个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或任何按钮加载数据时显示这个进度条，单击..But，在与进度栏相关的GUI中看不到任何内容。

Answer 1

如果在react-promise-tracker中使用基于类的组件，则需要使用特殊的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

工作演示:

​

​

注: 您可以签出文档，因为他们已经解释了一切，我认为您可以帮助您找到您想要实现的任何场景。

Answer 2

在本例中，您可以看到如何通过单击按钮更改旋转器的可见性，从而更改了本地状态。

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