Как я могу объединить состояние и реквизиты для контроля видимости оповещения в React

Question

У меня есть компонент оповещения, который по умолчанию невидим, и когда что-то происходит (например, щелчок) в родительском компоненте, компонент оповещения будет виден. Внутри компонента оповещения есть кнопка закрытия, чтобы сделать компонент снова невидимым. Я новичок, чтобы реагировать, и я нашел это довольно трудно реализовать.

Вот мое текущее решение:

Компонент предупреждения:

import React, {useEffect, useState} from "react";

const Alert = ({show, style, message}) => {

    const [visibility, setVisibility] = useState(show);

    useEffect(() => {
        setVisibility(show);
    },[show]);

    return (
        <>
        {(visibility)?(
            <div className="col">
              <div className={"alert shadow alert-"+style} role="alert">
                {message}
                <button type="button" className="close" aria-label="Close" onClick={(e) => {
                  setVisibility(false);
                }}>
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            </div>
        ):(<></>)}
        </>
    );


}

export default Alert;

Родительский компонент имеетсостояние для управления им.

const [alert, setAlert] = useState({
    'show': false,
    'style':'',
    'message':''
  });

<Alert show={alert.show} style={alert.style} message={alert.message} />
<button onClick={(e) => {

  setAlert({
    'show':false, 
    'style':'',
    'message':''
  });
  setAlert({
    'show':true, 
    'style':'success',
    'message':'Thank you!'
  });
}>
  show
</button>

Проблема заключается в том, что пропеллер show не изменяется при нажатии на кнопку закрытия внутри компонента оповещения, когда я нажимаю на кнопку в родительском компонентесвойство show по-прежнему true, поэтому оно не будет отображать компонент оповещения. Обходной путь, который я использую, - установить для свойства prop show значение false, а затем снова установить значение true. Это не очень аккуратно. Есть ли лучший способ объединить опору и состояние, чтобы определить видимость предупреждения?

Answer 1

Вам нужно определить функцию, чтобы скрыть Alert в самом родительском компоненте и передать его дочернему компоненту.

const hideAlert = () => {
   setAlert(prevState => ({
     ...prevState,
     show: !prevState.show
   }))
}

Затем вы можете передать это компоненту Alert,

<Alert show={alert.show} style={alert.style} message={alert.message} hideAlert={hideAlert}/>

В компоненте оповещения нет необходимости снова сохранять реквизиты в этом состоянии. Вы должны напрямую использовать реквизит,

const Alert = ({show, style, message, hideAlert}) => {
  return (
    <>
      { show ? <div className="col">  //directly use props here to show alert
          <div className={"alert shadow alert-"+style} role="alert">
            {message}
            <button type="button" className="close" aria-label="Close" onClick={hideAlert}>
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        </div>
        : 
        <></>
      }
    </>
  );
}

Демо