隐藏一个元素及其空间并通知应用程序，以便它使用 React 显示其他内容

Posted 2023-02-22

【中文标题】隐藏一个元素及其空间并通知应用程序，以便它使用 React 显示其他内容

【英文标题】：Hide an element and it's space and notify the app so it displays other content with React

【发布时间】：2019-12-15 07:41:17

【问题描述】：

大家好。抱歉，如果这是一个愚蠢的问题或非常简单的问题。我是 javascript 领域的新手。

我正在尝试开发一个 React 应用程序。 我的应用由两部分组成：一个是 loader，它是一个反应组件，另一个是 应用内容，它默认是隐藏的。

加载器只是一个简单的 html 和 CSS 动画，它异步运行一个任务，当任务完成时，它被分配一个类，使其淡出。

由于 Loader 刚刚被隐藏，它继续占用空间，并且由于它是一个单独的 React 组件，我不知道如何通知我的应用程序 Loader 组件已完成。

所以基本上我想要的是加载器完全消失，所以它不会在不可见的情况下继续占用空间，并且在加载器完成时显示应用程序内容。这似乎是一个非常简单的任务，但我无法弄清楚如何。

我怎样才能做到这一点？

任何帮助将不胜感激。提前致谢。

我的代码

应用组件

function App() 
    componentDidMount() 
        Secure()
    

    return (
      <div className="App">
        <header className="App-header">
          <Loader task=test()/>
          <div className="App-content">
            <h1>Welcome to GitChain</h1>
          </div>
        </header>
      </div>
    );

加载器组件

class Loader extends React.Component 
    constructor(props) 
      super(props);
      this.state =  loading: true ;
    

    componentDidMount(callback) 
      ;(async () => 
      await this.props.task
      this.setState( loading: false );
      )();
    

    render() 
      return (
        <div className=this.state.loading ? "sk-folding-cube" : "sk-folding-cube completed">
          <div className="sk-cube1 sk-cube"></div>
          <div className="sk-cube2 sk-cube"></div>
          <div className="sk-cube4 sk-cube"></div>
          <div className="sk-cube3 sk-cube"></div>
        </div>
      );
    
  

App.css

.App 
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont;
    font-weight: bold;
 

.App-logo 
    animation: App-logo-spin infinite 20s linear;
    height: 40vmin;
    pointer-events: none;


.App-header 
    background-color: #060606;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;


.App-link 
    color: #61dafb;


@keyframes App-logo-spin 
    from 
      transform: rotate(0deg);
    
    to 
      transform: rotate(360deg);
    


.App-content 
    opacity: 0;

【参考方案1】：

你可以在 render 方法中返回 null，所以它不会渲染任何东西。

class Loader extends React.Component 
    constructor(props) 
      super(props);
      this.state =  loading: true ;
    

    componentDidMount(callback) 
      ;(async () => 
      await this.props.task
      this.setState( loading: false );
      )();
    

    render() 

      if (!this.state.loading) 
        return null;
      

      return (
        <div className=this.state.loading ? "sk-folding-cube" : "sk-folding-cube completed">
          <div className="sk-cube1 sk-cube"></div>
          <div className="sk-cube2 sk-cube"></div>
          <div className="sk-cube4 sk-cube"></div>
          <div className="sk-cube3 sk-cube"></div>
        </div>
      );
    
  

【讨论】：

是的，谢谢，这与我想要的类似，但是这会立即隐藏加载器，因此它不会制作动画，但这不是什么大问题。那么现在，我如何通知我的应用 Loader 停止渲染以便它可以显示其他内容？很抱歉打扰您

【参考方案2】：

您可能希望将整个 Loader 组件包装在这样的条件下

this.state.loading && <Loader task=test()/>

这只会在this.state.loading 为真时显示加载器组件。

【讨论】：

谢谢，这行得通。现在，我如何通知我的主应用程序加载程序没有呈现，以便它可以显示App-content div？很抱歉打扰您

我会在父组件示例中处理这个问题，在父组件中创建一个函数setLoading = (val) => this.setState(loding:val)，然后在加载器组件中传递它，比如<Loader showLoaderHandler=this.setLoading task=task()>，然后在加载器组件中调用this.props.showLoaderHandler(false)，当你想隐藏加载器。

【参考方案3】：

如果您想根据Loader 控制App 呈现的内容（如果我根据“...以及加载程序完成时显示的应用程序内容正确理解您。”）您需要移动加载状态为App 级别。

你可以这样做：

class App extends React.Component 
    constructor() 
      super();
      this.state =  loading: true ;
      this.switchLoadingState = this.switchLoadingState.bind(this)
    

    componentDidMount() 
    // componentDidMount is available in class components only
      Secure()
    

    switchLoadingState() 
      this.setState( loading: !this.state.loading )
    

    render() 
      const  loading  = this.state

      return (
        <div className="App">
           loading && (
            <header className="App-header">
              <Loader task=test() loading=loading switchLoadingState=this.switchLoadingState />
              <div className="App-content">
                <h1>Welcome to GitChain</h1>
              </div>
            </header>)
          
        </div>
    );
    



class Loader extends React.Component 
    constructor(props) 
      super(props);
    

    componentDidMount(callback) 
      ;(async () => 
      await this.props.task
      this.props.switchLoadingState();
      )();
    

    render() 
      const  loading  = this.props
      return (
        <div className=loading ? "sk-folding-cube" : "sk-folding-cube completed">
          <div className="sk-cube1 sk-cube"></div>
          <div className="sk-cube2 sk-cube"></div>
          <div className="sk-cube4 sk-cube"></div>
          <div className="sk-cube3 sk-cube"></div>
        </div>
      );
    
  

【讨论】：

谢谢！这正是我所需要的，但是当我尝试运行您的代码时，我在const switchLoadingState = () => this.setState( loading: !this.state.loading ) 上不断收到此错误：Parsing error: Unexpected Token 在!this.state.loading 和 之间的空格处。很抱歉打扰您

你现在可以试试吗，我已经把那个函数重写为一个 ES5 函数

另外，请查看codesandbox.io/s/happy-black-b0rzj 以获得进一步说明