Отображение и скрытие элементов с помощью React Native

React предоставляет несколько способов управления видимостью элементов на странице. Распространенным подходом является использование встроенного стиля для установки свойства отображения. Однако этот метод требует встроенного стиля, что может быть неудобно и сделать код менее читабельным.

Более элегантное решение — использовать React State API. State API позволяет вам определять данные и управлять ими внутри компонента React. Изменяя состояние компонента, вы можете вызвать повторную отрисовку, которая обновит пользовательский интерфейс на основе нового состояния.

Вот как вы можете показать или скрыть элемент на странице с помощью события щелчка, используя API состояния React:

1. Создайте новый компонент React, например MyComponent.
2. В методе рендеринга вашего компонента отрисуйте нужный элемент. чтобы показать или скрыть, и используйте условный рендеринг, чтобы определить, должен ли элемент быть видимым.
3. В методе конструктора вашего компонента создайте новую переменную состояния, например showElement, и установите для нее значение false.
4. Добавьте обработчик события onClick к элементу, который инициирует изменение видимости. В обработчике событий переключите переменную состояния showElement.
5. Используйте переменную состояния showElement в методе рендеринга для условной отрисовки элемента. Если showElement имеет значение true, элемент будет виден. Если showElement имеет значение false, элемент будет скрыт.

Вот пример того, как вы можете это реализовать:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showElement: false
    };
  }

  toggleShowElement = () => {
    this.setState((prevState) => ({ showElement: !prevState.showElement }));
  };

  render() {
    return (
      

        {this.state.showElement && 
Hello World!
}
        Toggle
      
    );
  }
}

Этот фрагмент кода создает новый компонент React под названием MyComponent, который отображает элемент div с текстом «Hello World!» когда переменная состояния showElement имеет значение true. Он также включает кнопку, которая переключает видимость надписи «Hello World!». элемент.