Javascript 隐藏一个元素并将其'；s共享空间并通知应用程序，以便它使用React显示其他内容

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

我正在尝试开发一个React应用程序。 我的应用程序由两部分组成：加载器，它是一个react组件；应用程序内容，默认情况下是隐藏的

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

由于加载程序只是隐藏的，它继续占用空间，而且它是一个单独的React组件，我不知道如何通知我的应用程序加载程序组件已经完成

所以基本上我想要的是加载器完全消失，这样它就不会在不可见的情况下继续占用空间，当加载器完成时，应用程序内容就会出现。这似乎是一项极其简单的任务，但我还没有弄清楚如何完成

我怎样才能做到这一点

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

我的代码 应用程序组件

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>
      );
    }
  }

---

可以在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>
      );
    }
  }

类加载器扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={loading:true}；
}
componentDidMount（回调）{
；（异步（）=>{
等待这个任务
this.setState（{loading:false}）；
})();
}
render（）{
如果（！this.state.loading）{
返回null；
}
返回(
);
}
}

您可能希望在这样的条件下包装整个加载程序组件

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

{this.state.loading&&}

---

如果

This.state.loading

为true，则仅显示加载程序组件。

如果要控制

App

呈现的内容（如果我根据“…以及加载程序完成时显示的应用程序内容”正确理解），则需要根据

loader

将加载状态移动到

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>
      );
    }
  }

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={loading:true}；
this.switchLoadingState=this.switchLoadingState.bind（this）
}
componentDidMount（）{
//componentDidMount仅在类组件中可用
安全（）
}
切换加载状态（）{
this.setState（{loading:！this.state.loading}）
}
render（）{
const{loading}=this.state
返回(
{加载&&(
欢迎来到GitChain
)
}
);
}
}
类加载器扩展了React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount（回调）{
；（异步（）=>{
等待这个任务
this.props.switchLoadingState（）；
})();
}
render（）{
const{loading}=this.props
返回(
);
}
}

是的，谢谢，这与我想要的类似，但这会立即隐藏加载程序，因此不会生成动画，但这不是什么大问题。那么现在，我如何通知我的应用程序加载程序停止渲染，以便它可以显示其他内容？抱歉打扰你了，汉克斯，这个有用。现在，我如何通知我的主应用程序加载器没有渲染，以便它可以显示

应用程序内容

div？抱歉打扰您，我将在父组件的父组件示例中处理此问题，在父组件中创建一个函数

setLoading=（val）=>{this.setState（{loding:val}）}

并在加载程序组件中传递它，如

，然后在加载程序组件调用

this.props.showLoaderHandler（false）

当您想隐藏加载程序时。谢谢！这正是我所需要的，但当我尝试运行您的代码时，我在

const switchLoadingState=（）=>This.setState（{loading:！This.state.loading}）

：

解析错误：在
之间的空格处出现意外标记
！此.state.loading
和
}
。很抱歉打扰您。您现在可以试试吗？我已经将该函数重写为ES5函数。因此，请查看以进一步澄清
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>
      );
    }
  }