无法使用父 class 组件和子功能组件打开/关闭模态

Question

我有一个父组件，我正在努力正确打开/关闭子组件（模态）。 下面的两个代码框是我的组件的简化示例。

编辑：这是一个带有以下代码的代码沙箱——没有实际的模式，但是我已经记录了我认为会对这个问题产生影响的所有有状态值，你可以看到它们是如何改变/改变的不要像我希望的那样改变。

代码沙箱

• 当父组件打开时，我可以单击 MenuItem 并且可以看到 state 更改，但是除非我暂时关闭父组件并重新打开它，否则模态不会打开（然后父组件打开时模态已经打开）
• When the modal is open, and I try to close by clicking the close button (which has the state changing function from parent inside of the onClick method. this.state.showModal remains true, and doesn't change to false.
• 如果我向子组件添加一个 closeModal 状态值并在关闭按钮 onClick 期间更改它，this.state.showModal 仍然是 true。

感谢任何伸出援手的人，如果您有任何澄清问题，请随时提出！

class Parent extends Component {
    
    constructor(props) {
      super(props);
      this.showModal = this.showModal.bind(this);
      this.closeModal = this.closeModal.bind(this)
      this.state = {
        showModal: false
      };
    this.showModal = this.showModal.bind(this)
    this.closeModal = this.closeModal.bind(this)
    }
    showModal() {
      this.setState({ showModal: true });
    }
    closeModal() {
      this.setState({ showModal: false });
    }
    render() { 
      return (
      <MenuItem onClick={this.showModal}>
      <ChildComponent
       prop1={prop1}
       isOpen={this.state.showModal}
       closeModal={this.closeModal}
       />
       </MenuItem>
)}

const ChildComponent = ({
  prop1,
  isOpen,
  closeModal
  }) => {
  
  const [modalOpen, setModalOpen] = useState(isOpen)


  useEffect(() => {
    setModalOpen(isOpen)
  },[isOpen])
  
  console.log('isopen on child', isOpen)
  console.log('modalOpen', modalOpen)
  return (
  <div>
   {modalOpen && (
  <button
  onClick={() => {
    setModalOpen(false)
    closeModal()
  }}
  >
    {'click to close modal'}
    </button>
   )}
   </div>
)}

)}

Answer 1

我发现了我的问题！

在我的父组件中，设置模态打开的 onClick 处理程序包装了我的子组件。 我需要删除它并有条件地单独渲染它，如下所示：

<div>
        <div onClick={this.showModal}>{"Click here to open modal"}</div>
        {this.state.showModal && (
          <ChildComponent
            prop1={prop1}
            isOpen={this.state.showModal}
            closeModal={this.closeModal}
          />
        )}
      </div>