如何从类组件（父级）更改功能组件（子级）中的 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 传递。在父母中&nbsp; const [modalIsOpen, setModalIsOpen] = useState(false)&nbsp; const toggleModal = (val) => setModalIsOpen(val)...&nbsp; <ModalReply modalisOpen={modalIsOpen} toggleModal={toggleModal}/>在儿童时期function ModalReply(props) {<div>&nbsp; <Modal&nbsp;&nbsp; &nbsp; isOpen={props.modalIsOpen}&nbsp; &nbsp; onRequestClose={() => props.toggleModal(false)}&nbsp; >&nbsp; &nbsp;<h1>Test</h1>&nbsp; </Modal></div>

Answer 2

将状态移至父级，使您的 ModalReply 无状态。const ModalReply = ({ isOpen, onClose }) => (&nbsp; <div>&nbsp; &nbsp; <Modal isOpen={isOpen} onRequestClose={onClose}>&nbsp; &nbsp; &nbsp; <h1>Test</h1>&nbsp; &nbsp; </Modal>&nbsp; </div>);export default function App() {&nbsp; const [isOpen, setIsOpen] = useState(false);&nbsp; const toggle = setIsOpen((oldIsOpen) => !oldIsOpen);&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <button onClick={toggle}>Open Modal</button>&nbsp; &nbsp; &nbsp; <ModalReply isOpen={isOpen} onClose={toggle} />&nbsp; &nbsp; </div>&nbsp; );}

Answer 3

React数据流是单向的，父组件不能直接修改子组件的状态。为了实现你想要的，你需要：将状态移动到父组件并将数据作为 props 传递给子组件。使用 redux 或 mobx 等状态管理器使用上下文 API