如何将反应组件用作函数？答案

【问题标题】：How to use a react component as a function?如何将反应组件用作函数？
【发布时间】：2020-06-12 23:03:28
【问题描述】：

我想打开一个 materialui 对话框并处理来自 javascript 的结果以制作一个简单的是/否提示。

我喜欢它像这样工作（只是模拟代码来解释）

 <MyPromptComponent />

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

所以问题是；我如何（如果）将函数放入我的组件中，我可以从引用中调用？

如果有人知道类似的例子，我将不胜感激。

编辑：2020 年 11 月 10 日这样做的状态方式的“问题”是我必须让函数显示提示，必须在函数外部存储临时变量。如果我能做这样的事情，代码会更具可读性：

{
  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 中，我似乎需要为每个案例一个单独的确认对话框，因为每个案例的“是”/“否”事件都是硬编码的。

【问题讨论】：

您应该为此使用状态。像<MyPromptComponent show={this.state.promptShow} message={this.state.promptMessage} /> 一样，组件在内部处理显示。
是的，但是当我调用提示时，我无法在同一个函数中处理结果，可以吗？我知道做事的反应方式是状态，但在这种情况下，如果我能让它有点像 javascripts 提示符，那就太好了。
那么你将传递一个属性给组件，比如onResponse={this.handleResponse}，它指向你父组件中的一个函数，或者在那里执行一个内联函数。

标签： reactjs components material-ui

【解决方案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

【讨论】：

onClick={() => onConfirm()} 是不必要的。只需将引用传递给onClick={onConfirm}。与onCancel 相同。