Javascript 我们可以直接将setState传递给按钮元素吗？

通常，我会将setVisFalse作为prop传递给Modal，然后在调用它的Modal组件中定义一个按钮，但我希望使Modal动态化，这样，它可以是定义onClick事件侦听器的任何其他组件，而不是按钮

下面的代码运行良好，但我想知道它是正确的方法吗

const Parent = () => {
  const [vis, setVis] = useState(false);
  return (
    <>
      {vis && (
        <Modal>            // generally, i pass here a setVisFalse as a prop.
          <h1>Hello Modal</h1>
          <button onCLick={setVisFalse}>Close Modal</button> // directly defining onCLick here only.
        </Modal>
      )}
    </>
  );
};

export default class Modal extends React.Component {
  render() {                                                    // instead of definig a button here,
    return <div className="modal">{this.props.children}</div>      it should be already inside children
                                                                 
  }
}

使用UseContextAPI

---

pros-可用于任何嵌套级别的子级。

您显然希望将布尔值传递给vis状态，因此您的操作方式无法实现这一点 你需要这样做

const Parent = () => {
  const [vis, setVis] = useState(false);
  const setVisState = () => {
        setVis(value => !value);
}
  return (
    <>
      {vis && (
        <Modal>            // generally, i pass here a setVisFalse as a prop.
          <h1>Hello Modal</h1>
          <button onCLick={setVisState }>Close Modal</button> // directly defining onCLick here only.
        </Modal>
      )}
    </>
  );
};

---

按下按钮时需要vis值变为false？是的，这很好。模态组件只是一个没有业务规则的UI抽象。孩子们自己处理自己的事情。这种类型的组件设计一直在进行。@MarcCharpentier Yes.setVisState是一个函数，类似于代码中的toggleModal，我只是在代码中没有提到。啊，好的，我更新了它