如何使用React组件作为函数？

Question

我想打开一个Materialui对话框并处理来自javascript的结果，以给出简单的是/否提示。

Id希望它能像这样工作（只是用样机代码来说明）

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

请参阅sandbox