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

Question

我对 React 还很陌生。我目前在 React 中使用 useEffect 制作了一个加载屏幕，但我不确定如何使用类组件制作它。这是我工作的功能组件。

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>