Question

在我的父母班上，我有以下内容

<div>
  <button onClick(OPEN MODAL)>Open Modal<button/>
  <ModalReply /> // default to be closed at first
</div>

ModalReply是功能组件

function ModalReply(props) {
  const [modalIsOpen, setModalIsOpen] = useState(false)

<div>
  <Modal 
    isOpen={modalIsOpen}
    onRequestClose={() => setModalIsOpen(false)}
  >
   <h1>Test</h1>
  </Modal>
</div>

从父类中，我想访问模式状态组件并将useState-> setModalIsOpen设置为true

Answer 1

在父级中设置modalState并将其作为子级组件的道具传递。

在父母中

  const [modalIsOpen, setModalIsOpen] = useState(false)

  const toggleModal = (val) => setModalIsOpen(val)

...

  <ModalReply modalisOpen={modalIsOpen} toggleModal={toggleModal}/>

在儿童中

function ModalReply(props) {

<div>
  <Modal 
    isOpen={props.modalIsOpen}
    onRequestClose={() => props.toggleModal(false)}
  >
   <h1>Test</h1>
  </Modal>
</div>

Answer 2

将状态移到父级，使您的ModalReply无状态。

const ModalReply = ({ isOpen, onClose }) => (
  <div>
    <Modal isOpen={isOpen} onRequestClose={onClose}>
      <h1>Test</h1>
    </Modal>
  </div>
);

export default function App() {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = setIsOpen((oldIsOpen) => !oldIsOpen);

  return (
    <div className="App">
      <button onClick={toggle}>Open Modal</button>
      <ModalReply isOpen={isOpen} onClose={toggle} />
    </div>
  );
}

Answer 3

反应数据流是单向的，父级不能直接修改子级组件的状态。要实现您想要的目标，您需要：

将状态移动到父组件并将数据作为道具传递到子组件。
使用状态管理器，例如redux或mobx
使用上下文api

如何从类组件（父组件）更改功能组件（子组件）中的useState

3 个答案: