如何使用react hook将back prop更新为子组件

Question

我有一个这样的父组件，只是为了显示对话框

子组件(Main to show dialog)

export const MedicalRecord = memo(function MedicalRecord() {
// const onPressViewAll = useCallback(() => {}, [])
const [show, setShow] = useState(false) ///to show dialog
function hanndleDialog() {
setShow(!show) set to show dialog
}
// useEffect(() => {
//   if (show == true) {
//     setShow(!show)
//   }
// },[show])
return (
<SummaryViewContainer
count={5}
title={"dashboardScreen.medicalRecords.title"}
onPress={() => {
hanndleDialog()
}}
>
<View>
{show && (
<ProgressDialog
show={show} //pass t
callback={() => {
hanndleDialog()
}}
/>
)}
<RecordItem />
<RecordItem />
<RecordItem />
</View>
</SummaryViewContainer>
)
})

显示这个对话框的父组件

export default function DialogTesting(show: boolean, { callback }) {
const [showDialog, doShow] = useState(show) //show to present show in child
return (
<View>
{/* <Button
title="click"
onPress={() => {
setShow(true)
}}
>
<Text>Show dialog</Text>
</Button> */}
<Dialog
visible={showDialog}
title="Record New Progress"
style={DIALOG}
onClose={() => {
doShow(false)
callback()
}}
>

但是我不知道如何在关闭对话框时再次打开对话框，它只打开一次，我尝试React Hook:从子组件发送数据到父组件但不工作!

我怎么能显示对话框，当我点击关闭按钮，孩子们返回原来的状态，所以我可以再次点击它，非常感谢你

这里有一个关于这个问题的简短视频https://recordit.co/0yOaiwCJvL

Answer 1

我假设您想找到一种方法来显示隐藏基于单击的组件。这是相同的沙盒

在此解决方案中，不是使用派生状态，而是在父状态中保持状态，并且根据该状态挂载/卸载子状态。

状态可以通过父类中存在的方法来更新，并且该方法被传递给子类，以便在"隐藏子类"上触发。按钮。同样的方法也用于显示子组件。

下面是相同的核心代码

import React from "react";
const Dialog = ({ hideMe }) => {
return (
<div>
<div>I am dialog</div>
<button onClick={hideMe}>Hide me</button>
</div>
);
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = { showDialog: false };
}
toggleDialog = () => {
this.setState((prevState) => {
return { showDialog: !prevState.showDialog };
});
};
render() {
return (
<div>
<div>I am parent.</div>
<button onClick={this.toggleDialog}>Toggle Dialog</button>
{this.state.showDialog ? <Dialog hideMe={this.toggleDialog} /> : null}
</div>
);
}
}
export default App;