将函数传递给作为“道具”到达的组件。 - 反应 - 材质 UI

【问题标题】：Pass a function to a component arrived as '' Props ''. - React - Material UI将函数传递给作为“道具”到达的组件。 - 反应 - 材质 UI
【发布时间】：2021-12-30 13:56:03
【问题描述】：

  <SimpleDialog
            selectedValue={selectedValue}
            open={open}
            onClose={handleClose}
            title={title}
            componentBody={componentBody}
            />

我想将“handleclose”传递给组件（componentBody），但该组件作为“道具”出现在我面前，有没有办法做到这一点？

【问题讨论】：

我不完全理解这个问题。所有这些值都作为道具传递和接收，具体问题是什么？
到组件主体，我传递了一个已经作为道具出现在模态中的组件， componetBody = {componentBody (我是作为道具到达的组件} 在该组件中有一个按钮，它我想在点击时通过handleclose。不知道我是否说清楚了！
我想是的。在这种情况下，您应该可以在上层（最初传递它的地方）传递它，否则它必须公开一些方法以允许您设置该处理程序。像现在这样，你似乎只能“随波逐流”而不与它互动。

标签： reactjs material-ui

【解决方案1】：

如果您想将component 传递给另一个component，您应该使用high order components 或HOC，并像布局一样包装子组件，如下所示：

function App() {
  return (
    <div className='App'>
      <HOC message={"from App"}>
        <ComponentB name='Reza' func={() => alert("alert message")} />
      </HOC>
    </div>
  );
}
const ComponentB = ({ name, func }) => {
  return <h1 onClick={func}>name is : {name}</h1>;
};

const HOC = ({ children, message }) => {
  return (
    <>
      {message}
      <br />
      {children}
    </>
  );
};

export default App;

在您的代码库中，您可以像下面这样：

<SimpleDialog
            selectedValue={selectedValue}
            open={open}
            title={title}
>
  <componentBody onClose={handleClose}/>
</SimpleDialog>

【讨论】：