reactjs - 在 React 中隐藏和显示外部组件

Question

我是 react 新手，我有一些问题想要解决。我想知道如何在进行休息调用之前和之后显示和隐藏 react 组件。我有以下组件:

class Loading {

render(){
     return (
        <div >
            <Modal isOpen={true} centered >
                <ModalHeader>Loading...</ModalHeader>
                <ModalBody >
                    <div align='center' className="mt-2 mb-2">
                        <Spinner style={{ width: '4rem', height: '4rem' }} color="primary" />
                    </div>
                </ModalBody>
            </Modal>
        </div>
    )
}
}export default Loading;

我想在调用rest api之前在其他模块中显示这个组件，并在数据到来后隐藏这个组件。这个想法是这样的:

class List extends Component {
    constructor(props) {
        super(props)
        this.state = {
            show : false
        }
     }

     // HERE I WOULD LIKE TO SHOW THE LOADING COMPONENT

     callRestApi = () => {

          axiosAuth.get(url, getConfig())
        .then(response => {
            console.log(response.data)
            this.setState({
                eventos: response.data
            })
        }).catch(error => {
            console.log(error);
            return null
        });

         // HERE I WOULD LIKE TO HIDE THE LOADING COMPONENT
     }

     render() {
         return(
              <div>
                  <Button className="mr-2" color="primary" size="sm" onClick={this.callRestApi}>List All</Button>   
              </div>

我该怎么做？

Answer 1

您可以创建指示加载微调器是否可见的状态。并在 Promise 链中追加最后一个 .then 来修改它。

class List extends Component {
constructor(props) {
    super(props)
    this.state = {
        show : false,
        loaderVisible: true
    }
 }

 // HERE I WOULD LIKE TO SHOW THE LOADING COMPONENT

 callRestApi = () => {

      axiosAuth.get(url, getConfig())
    .then(response => {
        console.log(response.data)
        this.setState({
            eventos: response.data
        })
    }).catch(error => {
        console.log(error);
        return null
    }).then(() => {
          this.setState({loaderVisible: false });
    });
}

 render() {
     return(
          <div>
            {
                this.state.loaderVisible? <Loading /> : ''
            }
              <Button className="mr-2" color="primary" size="sm" onClick={this.callRestApi}>List All</Button>   
          </div>

然后在微调器上使用三元语法来确定可见性。