if (isMenuOpen) {
document.addEventListener('keydown', this.keyPressHandler)
} else {
document.removeEventListener('keydown', this.keyPressHandler)
}Данный подход справедлив только к статическим сайтам - где известно точное количество изображений и все они вручную прописаны в файле-библиотеки
) В реальных проектах - где количество изображений неизвестно и записывать путь к каждой картинке - не лучшее решение. Для этого в state из componentDidMount - ajax запроса будет передан путь к картинке которая храниться на сервере.
import Img1 from './img1.png';
import Img2 from './img1.png';
import Img3 from './img1.png';
export const images = { Img1, Img2: Img3 }import { images } from 'assets.js';
<ImgComponent src={images.Img1} />export default function Home() {
const router = useRouter()
const id = router.query.id;
const [company, setCompany] = useState(null);
useEffect(() => {
fetch(`${url}/selectCompany`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: id
})
})
.then(response => response.json())
.then(result => setCompany(result));
}, [id, setCompany])
return company ? (
<div className="container">
<Head>
<title>Company</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<TopBar />
<GetCompanyPage company={company} />
<Footer />
</div>
) : null;
}const item = action.payload
const existItem = state.asideItems.find(item => action.payload.id === item.id);
if(existItem)
{
return{
...state,
asideItems: state.asideItems.map(currentItem => item.id === currentItem.id ? { ...currentItem, quantity: currentItem.quantity + 1 } : currentItem),
total: state.total + item.price,
}
}const onDrop = useCallback(async (acceptedFiles) => {
const newImage = acceptedFiles[0];
let hasError;
if (newImage.size > allowedMaximumFileSize) {
hasError = true;
alert("Размер файла не допустим");
}
if (!allowedMimeTypes.includes(newImage.type)) {
hasError = true;
alert("Тип файла не допустим");
}
if (!hasError) {
const previewBASE64 = await fileReader(newImage);
onImageChange(name, { file: newImage, preview: previewBASE64 });
}
}, []);const withTheme = Component => ({ userPalette, ...props }) => (
<ThemeProvider theme={defaultMaterialTheme(userPalette)}>
<Component {...props} />
</ThemeProvider>
);
export default compose(
hot,
connect(mapStateToProps),
withTheme,
)(Routes);