mport { FC, memo } from 'react'; import styles from './modal.module.css'; import { CloseIcon } from '@zlden/react-developer-burger-ui-components'; import { TModalUIProps } from './type'; i

Вопрос пользователя:

mport { FC, memo } from 'react'; import styles from './modal.module.css'; import { CloseIcon } from '@zlden/react-developer-burger-ui-components'; import { TModalUIProps } from './type'; import { ModalOverlayUI } from '@ui'; export const ModalUI: FC = memo( ({ title, onClose, children }) => ( <> {children} </> ) ); import { FC, memo, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { TModalProps } from './type'; import { ModalUI } from '@ui'; const modalRoot = document.getElementById('modals'); export const Modal: FC = memo(({ title, onClose, children }) => { useEffect(() => { const handleEsc = (e: KeyboardEvent) => { e.key === 'Escape' && onClose(); }; javascript Copy code document.addEventListener('keydown', handleEsc); return () => { document.removeEventListener('keydown', handleEsc); }; }, [onClose]); return ReactDOM.createPortal( {children} , modalRoot as HTMLDivElement ); }); import { ConstructorPage } from '@pages'; import { Feed } from '@pages'; import { Login } from '@pages'; import { Register } from '@pages'; import { ForgotPassword } from '@pages'; import { ResetPassword } from '@pages'; import { Profile } from '@pages'; import { ProfileOrders } from '@pages'; import { NotFound404 } from '@pages'; import { Modal } from '@components'; import { OrderInfo } from '@components'; import { IngredientDetails } from '@components'; import { BurgerIngredients, BurgerConstructor } from '@components'; import '../../index.css'; import styles from './app.module.css'; import { AppHeader } from '@components'; import { useDispatch, useSelector } from 'react-redux'; import { useEffect } from 'react'; import { Route, Routes, Link } from 'react-router-dom'; import { getIngredientsApi } from '@api'; import { fetchIngredients, getIngredientsSelector } from '../../services/slices/ingredientSlice'; import { RootState } from '../../services/store'; import { ThunkDispatch } from 'redux-thunk'; import { AnyAction } from 'redux'; import { createAsyncThunk } from '@reduxjs/toolkit'; import { TIngredient } from '@utils-types'; function App() { const dispatch: ThunkDispatch<RootState, unknown, AnyAction> = useDispatch(); useEffect(() => { dispatch(fetchIngredients()); }, [dispatch]); return ( {/* /} } /> <Route path='/ingredients/:id' element={ <Modal title='Детали ингредиента' onClose={() => {}}> } /> <Route path='/profile/orders/:number' element={ <Modal title='Заказ' onClose={() => {}}> } /> ); } export default App; нужно скорректировать компонент App как сделать так, чтобы окно IngredientDetails закрывалось с кнопки, скорректировать код element={ <Modal title='Детали ингредиента' onClose={() => {}}> }/>

Ответ нейросети:

Пройдите быструю авторизацию для просмотра:

Для того чтобы окно IngredientDetails закрывалось с кнопки, нужно передать функцию onClose в компонент Modal и вызывать ее при нажатии на кнопку закрытия.

В компоненте App нужно скорректировать код следующим образом:

import React, { FC, memo, useEffect, useCallback } from 'react';
import ReactDOM from 'react-dom';

import { TModalProps } from './type';
import { ModalUI } from '@ui';
import { IngredientDetails } from '@components';

const modalRoot = document.getElementById('modals');

export const Modal: FC<TModalProps> = memo(({ title, onClose, children }) => {
  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onClose();
      }
    };

    document.addEventListener('keydown', handleEsc);

    return () => {
      document.removeEventListener('keydown', handleEsc);
    };
  }, [onClose]);

  const handleClickClose = useCallback(() => {
    onClose();
  }, [onClose]);

  return ReactDOM.createPortal(
    <ModalUI title={title} onClose={handleClickClose}>
      {children}
    </ModalUI>,
    modalRoot as HTMLDivElement
  );
});

function App() {
  const dispatch: ThunkDispatch<RootState, unknown, AnyAction> = useDispatch();

  useEffect(() => {
    dispatch(fetchIngredients());
  }, [dispatch]);

  return (
    <>
      {/* Your other routes */}
      <Route
        path='/ingredients/:id'
        element={
          <Modal title='Детали ингредиента' onClose={() => {
            // Close modal logic
          }}>
            <IngredientDetails />
          </Modal>
        }
      />
      {/* Your other routes */}
    </>
  );
}

export default App;

Теперь при нажатии на кнопку закрытия в компоненте ModalUI будет вызываться функция onClose, которая передается из компонента App.

Напишите нам, если в вопросе есть ваши персональные данные (yasnoponyatno24@yandex.ru)

import React, { FC, memo, useEffect, useCallback } from 'react';
import ReactDOM from 'react-dom';

import { TModalProps } from './type';
import { ModalUI } from '@ui';
import { IngredientDetails } from '@components';

const modalRoot = document.getElementById('modals');

export const Modal: FC<TModalProps> = memo(({ title, onClose, children }) => {
  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onClose();
      }
    };

    document.addEventListener('keydown', handleEsc);

    return () => {
      document.removeEventListener('keydown', handleEsc);
    };
  }, [onClose]);

  const handleClickClose = useCallback(() => {
    onClose();
  }, [onClose]);

  return ReactDOM.createPortal(
    <ModalUI title={title} onClose={handleClickClose}>
      {children}
    </ModalUI>,
    modalRoot as HTMLDivElement
  );
});

function App() {
  const dispatch: ThunkDispatch<RootState, unknown, AnyAction> = useDispatch();

  useEffect(() => {
    dispatch(fetchIngredients());
  }, [dispatch]);

  return (
    <>
      {/* Your other routes */}
      <Route
        path='/ingredients/:id'
        element={
          <Modal title='Детали ингредиента' onClose={() => {
            // Close modal logic
          }}>
            <IngredientDetails />
          </Modal>
        }
      />
      {/* Your other routes */}
    </>
  );
}

export default App;

ЯсноПонятно24

Пройдите быструю авторизацию для просмотра:

Пройдите быструю авторизацию для просмотра:

Последние вопросы: