React Access Loader组件与任何其他组件不同

Question

装载机组件：

import React, { Component } from "react";
export class Loader extends Component {
state = {
isLoading: true,
};
componentDidMount() {
setTimeout(() => {
this.setState({ isLoading: false });
}, 500);
}
render() {
return (
<span className={"loading " + (this.state.isLoading ? "show" : "hide")}>
<span className="loading-bg"></span>{" "}
<img src="img/loader.gif" alt="Loading" />{" "}
</span>
);
}
}
export default Loader;

布局组件：

import React, { Component } from "react";
import { Container } from "reactstrap";
import { NavMenu } from "./NavMenu";
import Loader from "./common/Loader";
import Footer from "./Footer";
export class Layout extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<NavMenu />
<Container fluid>
<Loader />
{this.props.children}
<footer className="d-flex justify-content-between align-items-center pt-3">
<Footer />
</footer>
</Container>
</div>
);
}
}

所以每个组件都会有loader，它会隐藏一次componentDidMount((。。。。我希望在其他操作时显示加载程序，如表单提交和打开模态。如何形成形式或模态成分。

我想重用相同的Loader组件。

Answer 1

加载状态应该在父组件中，在这种情况下，它应该在布局组件中，然后将其作为道具传递给Loader组件。当然，您应该显示state为true的加载器组件，如果为false则隐藏。