Для работы с JSON-файлом, который находится в директории рядом с билдом (например, в папке `public` вашего проекта React), вам нужно использовать метод `fetch`. В этом случае вы сможете динамически загружать файл при нажатии кнопки.
### Пример:
1. Поместите ваш JSON-файл в папку `public`. Например, пусть ваш файл называется `icons.json`.
2. Используйте `fetch` для загрузки данных из этого файла. Пример компонента на React:
```jsx
import React, { useState } from 'react';
const IconLoader = () => {
const [icons, setIcons] = useState([]);
const loadIcons = async () => {
try {
const response = await fetch('/icons.json'); // путь к вашему JSON-файлу в папке public
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
setIcons(data);
} catch (error) {
console.error('Ошибка при загрузке иконок:', error);
}
};
return (
<div>
<button onClick={loadIcons}>Загрузить иконки</button>
<div>
{icons.map((icon, index) => (
<img key={index} src={icon.src} alt={icon.alt} />
))}
</div>
</div>
);
};
export default IconLoader;
```
### Объяснение:
1. **Путь**: Убедитесь, что у вас есть файл `icons.json` в папке `public`. Путь к файлу будет `/icons.json` (относительно корня вашего сайта).
2. **Функция загрузки**: Функция `loadIcons` вызывается при нажатии кнопки. Она использует `fetch` для получения данных из JSON-файла.
3. **Обработка данных**: После успешной загрузки JSON-данные сохраняются в состояние `icons`, и иконки отображаются на странице.
### Important Note:
- Убедитесь, что ваш JSON-файл имеет правильный формат. Например, он может выглядеть так:
```json
[
{ "src": "path/to/icon1.png", "alt": "Icon 1" },
{ "src": "path/to/icon2.png", "alt": "Icon 2" }
]
```
- Также обратите внимание, что вы должны учитывать возможные ошибки в загрузке данных и соответствующим образом обрабатывать их.