如何將反應組件用作函數？

Question

我想打開一個 materialui 對話框並處理來自 javascript 的結果以制作一個簡單的是/否提示。

我喜歡它像這樣工作（只是模型代碼來解釋）

 <MyPromptComponent />

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

所以問題是； 如何（如果）我可以在我的組件中放置函數，我可以從參考調用？

如果有人知道類似的例子，我會很感激。

---

編輯：11/10/2020 這樣做的狀態方式的“問題”是我必須讓函數顯示提示，而必須在函數之外存儲臨時變量。 如果我可以做這樣的事情，代碼將更具可讀性：

{
  let tempData = doAProcessForThisFunctionOnly();
  let sureResult = confirmDialog.show('Are you sure?');
  if(sureResult )
    doSomeMoreWithTempData(tempData);
  else
   doSomeOtherStuff(tempData);
  
  doSomeEndStuff(tempdata);
}

作為反應，我必須這樣做

{
let tempData = doAProcessForThisFunctionOnly();
tempDataRef.current = tempData;
setShowDialog();
}

onYes = () => {
  let workData = tempDataRef.current;
  doSomeMoreWithTempData(workData );
  doSomeEndStuff(workData)
}

onNo = () => {
  let workData = tempDataRef.current;
  doSomeOtherStuff(workData );
  doSomeEndStuff(workData)
}

doSomeEndStuff = (workData) => {
  //Do the stuff here
}

看起來我真的需要跳進和跳出很多函數只是為了得到一個簡單的確認，甚至使用函數之外的變量（參考）。 對我來說，這似乎是代碼明智的一大步。

這樣做的“普通”方式甚至可以讓我使用來自許多不同功能的相同提示對話框組件。 在 reactit 中，我似乎需要為每個案例單獨的確認對話框，因為每個案例都對“是”/“否”事件進行了硬編碼。

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>
  );
};

請看沙盒