Question

我在显示和隐藏加载程序时遇到问题。在应用程序通用组件上有加载程序，现在我想从其他控制器中隐藏和显示加载程序。

加载程序代码如下

class App extends Component {

render() {

return (
        <div class={"loader"+ (this.props.isloading ? '' : 'hide')}>
         </div>
 )}
 }
 App.defaultProps = {
   isloading: false
 };

在其他组件中，如果我想使道具为true来显示加载程序，并使其为false来隐藏加载程序。

问题是如何显示来自其他组件的加载器？如何在其他组件中将“正在加载”属性设置为true或false

Answer 1

尝试将您的应用划分为可重用组件，以下代码仅是摘要，因此您可以根据需要调整代码

Loader Component

export class Loader extends Component {

    render() {

          return (
             <div class={"loader"+ (this.props.isloading ? '' : 'hide')}>
              </div>
          )
    }
 }

App component

import Loader //just a snippet give proper path in your code
class App extends Component {

    constructor() {
        this.state = { isLoading: true }
    }

    componentDidMount() {
         this.setState({isLoading: false})
     }

    render() {

        return (
            <Loader isloading = {this.state.isLoading} />
         )
     }
 }

反应js显示隐藏其他组件的其他常见组件属性

1 个答案: