Как использовать компонент реагирования как функцию?

Question

Я хотел бы открыть диалоговое окно materialui и обработать результат из javascript, чтобы сделать простое приглашение Да / Нет.

Мне бы хотелось, чтобы это работало примерно так (просто поясните код макета)

 <MyPromptComponent />

{
  MyPromptComponent.show('Do you really want to?').then((result) => alert(result ? 'then do it' : 'walk away') );
}

Итак, вопрос в том; Как (если) я могу поместить функции в свой компонент, которые я могу вызвать из ссылки?

Если кто-то знает пример, где что-то похожее, не так, я был бы признателен.

Answer 1

Вы должны контролировать все с состоянием:

export default function App() {
  const [show, setShow] = useState(false);
  return (
    <div className="App">
      <button onClick={() => setShow(true)}>Initiate</button>
      <MyPromptComponent
        title="Do you really want to?"
        show={show}
        onConfirm={() => { 
          setShow(false); 
          alert("Then do it")
        }}
        onCancel={() => { 
          setShow(false); 
          alert("Walk away")
        }}
      />
    </div>
  );
}

const MyPromptComponent = ({ show, title, onConfirm, onCancel }) => {
  return (
    <React.Fragment>
      {show && 
        <div>
          Lets pretend this is modal - {title}
          <button onClick={() => onConfirm()}>Confirm</button>
          <button onClick={() => onCancel()}>Cancel</button>
        </div>
      }
    </React.Fragment>
  );
};

Пожалуйста, смотрите песочница