如何从 class 组件 (parent) 更改功能组件 (child) 中的 useState

Question

在我的 parent class 我有以下内容

<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>

来自我的 parent class 我想访问模态状态组件并将 useState --> setModalIsOpen 设置为 true

Answer 1

在 parent 中设置 modalState 并将它们作为 child 组件的道具传递。

在parent

  const [modalIsOpen, setModalIsOpen] = useState(false)

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

...

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

在child

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数据流是单向的，父组件不能直接修改子组件的状态。要实现您想要的效果，您需要：

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

如何从 class 组件 (parent) 更改功能组件 (child) 中的 useState

How to change useState in functional component (child) from class component (parent)

javascript

reactjs

use-state