Как использовать функции, объявленные внутри компонентов

#reactjs #typescript #material-ui

#реагирует на #машинописный текст #материал-пользовательский интерфейс

Вопрос:

Я хотел создать компонент CustomAlert, используя некоторые компоненты MUI, который использует два состояния: «предупреждение» (отображается ли поле или нет); и «сообщение об ошибке» (сообщение об ошибке, отправленное серверной частью). Я сделал это, как показано ниже:

 export function CustomAlert() { const [alert, setAlert] = useState(false); const [alertMessage, setAlertMessage] = useState('');  const openAlertModal = async (message: string) =gt;{  setAlert(true);  setAlertMessage(message); }  return (  lt;divgt;  {alert ? lt;Alert  severity='error'  variant="outlined"  action={  lt;IconButton  aria-label="close"  color="inherit"  size="small"  onClick={() =gt; {  setAlert(false);  }}  gt;  lt;CloseIcon fontSize="inherit"/gt;  lt;/IconButtongt;  }  gt;{alertMessage}lt;/Alertgt; : lt;gt;lt;/gt; }  lt;/divgt; ) }  

Моя проблема в том, что я не могу получить доступ к функции «openAlertModal» при использовании этого компонента. Как я мог заставить это работать?

Комментарии:

1. Можете ли вы переместить свое состояние в родительский компонент?