В React для изменения содержимого элемента обычно используется состояние (state). Когда состояние компонента изменяется, React перерисовывает компонент с новыми данными.
Давайте рассмотрим простой пример изменения содержимого `div` при нажатии на кнопку. Для этого вам нужно будет создать классовый компонент или функциональный компонент с использованием хука `useState`.
Пример с функциональным компонентом и хуком `useState`:
```jsx
import React, { useState } from 'react';
function MyComponent() {
// Состояние для хранения содержимого div
const [content, setContent] = useState('Начальное содержимое div');
// Функция для обновления содержимого div
const changeContent = () => {
setContent('Измененное содержимое div');
};
return (
<div>
<div>{content}</div>
<button onClick={changeContent}>Изменить содержимое</button>
</div>
);
}
export default MyComponent;
```
В примере выше создаётся функциональный компонент `MyComponent`. С помощью хука `useState` устанавливаем начальное значение `content` и функцию `setContent` для его обновления. При клике на кнопку вызывается функция `changeContent`, которая изменяет значение `content`, а следовательно, и содержимое `div`.
Если вы предпочитаете использовать классовый компонент, тогда код может выглядеть следующим образом:
```jsx
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
// Инициализация состояния
this.state = {
content: 'Начальное содержимое div'
};
}
// Метод для обновления состояния
changeContent = () => {
this.setState({ content: 'Измененное содержимое div' });
};
render() {
return (
<div>
<div>{this.state.content}</div>
<button onClick={this.changeContent}>Изменить содержимое</button>
</div>
);
}
}
export default MyComponent;
```
Здесь принцип такой же, как и в функциональном компоненте, но мы используем метод `setState` классового компонента для изменения состояния, что приводит к перерисовке компонента с обновленными данными.
Выбор между функциональным и классовым компонентом зависит от вашего стиля программирования и требований проекта. В последнее время в React отдается предпочтение функциональным компонентам и хукам.
