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

【问题标题】：How to change useState in functional component (child) from class component (parent)如何从类组件（父）更改功能组件（子）中的useState
【发布时间】：2020-11-02 18:48:40
【问题描述】：

在我的父类中，我有以下内容

<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

【问题讨论】：

标签： javascript reactjs use-state

【解决方案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>

【讨论】：

onRequestClose={props.toggleModal} => onRequestClose={() => props.toggleModal(false)} 会更明确
父类是类，不能在类组件中使用“useState”。我会使用正常状态，但在我的情况下它不起作用，因为我正在循环一个问题对象数组并且每个问题都有一个模态
是的，但是我在一个组件上渲染多个模态，每个问题都会弹出一个模态
你能在这里添加一个最小可重现代码sn-p吗？
实际上我使用了你的代码并稍微调整了一下，对我来说效果很好，谢谢！！！

【解决方案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>
  );
}

【讨论】：

【解决方案3】：

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

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

【讨论】：