对 class 组件使用 useEffect（或等效的）（制作加载屏幕）

Question

我是 React 的新手。我目前已经使用 useEffect 在 React 中制作了一个加载屏幕，但我不确定如何使用 class 组件制作它。这是我的功能组件。

const [sourceLoading, setSourceLoading] = React.useState(true);

// control when to stop loading
useEffect(() => {
  setTimeout(() => {
    setSourceLoading(false);
  }, 1000);
}, []) 

  return (
    <div>
    {sourceLoading ? (<LoadingScreen />): (
      <>


      </>
      )}
    </div>
  );

我目前正在像这样转换函数，但是它不起作用，而且我的加载屏幕从未出现。我哪里错了？ componentDidMount 不是 useEffect 的正确替代品吗？

this.state = {
  sourceLoading: true,
};

this.componentDidMount = this.componentDidMount.bind(this);

componentDidMount() {
  setTimeout(() => {
    this.setState({ sourceLoading: false});
  }, 1000);
}

  render() {
    return (
      <div>
      {this.sourceLoading ? (<LoadingScreen />) : (<> 

    

       </>
      )}
      </div>
    );
  }

Answer 1

您需要像

一样访问渲染函数中的状态

{this.state.sourceLoading ? (<LoadingScreen />) : null}

Answer 2

它对我有用，如果你改变这一行：

{this.sourceLoading ? (content) : ""}
// should be
{this.state.sourceLoading ? (content) : ""}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      sourceLoading: true,
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        sourceLoading: false
      });
    }, 1000);
  }

  render() {
    return ( 
      <div>
        {this.state.sourceLoading ? "loading" : "not"}
      </div>
    );
  }
}

ReactDOM.render( <App /> , document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

对 class 组件使用 useEffect（或等效的）（制作加载屏幕）

Using useEffect (or the equivalent) for class component (making a loading screen)

javascript

reactjs

use-effect

react-class-based-component