如何使用反应钩子将后退道具更新为子组件

Question

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

子组件（主显示对话框）

   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 : Send data from child to parent component 但不起作用！

我如何显示对话框，当我点击关闭按钮时，孩子们会返回原始状态，所以我可以再次点击它，非常感谢你们

这是这个问题的简短视频 https://recordit.co/0yOaiwCJvL

Answer 1

我假设您想找到一种方法来显示基于点击的隐藏组件。所以this is the sandbox 也一样。

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

状态可以通过父级中存在的方法更新，并且此方法传递给子级以在“隐藏子级”按钮上触发。同样的方法也用于显示子组件。

以下是相同的核心代码，

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;