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

Question

In my parent class I have the following

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

ModalReply is the functional component

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

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

From my parent class I want to access the modal state component and set the useState --> setModalIsOpen to true

Answer 1

set the modalState in the parent and pass them as a props of the child component.

in parent

  const [modalIsOpen, setModalIsOpen] = useState(false)

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

...

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

in child

function ModalReply(props) {

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

Answer 2

Move the state to the parent, make your ModalReply stateless.

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 data flow is unidirectional, parents can't directly modify the state of child components. To achieve what you want, you need to either:

• Move the state to the parent component and pass the data as props to the child component.
• Use a state manager like redux or mobx
• Use context api