Блог

Главная - Вопросы по программированию - react js показывает, скрывает ли другие общие свойства компонентов от других компонентов

react js показывает, скрывает ли другие общие свойства компонентов от других компонентов

#reactjs

#reactjs

Вопрос:

У меня возникли проблемы с отображением и скрытием загрузчика. Загрузчик установлен в общем компоненте приложения, и теперь я хочу скрыть и показать загрузчик с другого контроллера.

Код загрузчика выглядит следующим образом

 class App extends Component {

render() {

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

В других компонентах, если я хочу сделать props true для отображения загрузчика и сделать его false для скрытия загрузчика.

Проблема в том, как показать загрузчик из другого компонента? как установить для свойств «isloading» значение true или false в других компонентах

Комментарии:

1. В чем именно ваша проблема с другими компонентами? Все компоненты работают одинаково, обрабатывая props и state для отображения своего содержимого.

2. почему бы вам не создать один Loader компонент? который можно использовать везде, импортируя этот компонент.

3. Проблема в том, как показать загрузчик из другого компонента? как установить для свойств «isloading» значение true или false в других компонентах

4. @AviatorX можете ли вы предложить мне пример?

5. Можете ли вы показать нам часть вашего кода, который не работает?

Ответ №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} />
         )
     }
 }