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

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 并将它们作为子组件的 props 传递。

在父母中

  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

React数据流是单向的，父组件不能直接修改子组件的状态。为了实现你想要的，你需要：

• 将状态移动到父组件并将数据作为 props 传递给子组件。

• 使用 redux 或 mobx 等状态管理器

• 使用上下文 API