如何使用反应挂钩将父组件中声明的状态更新到子组件

Question

我的 React 项目包含两个组件：一个是父组件，另一个是子组件。我的父组件如下所示：

import React, {useState } from 'react';
import AddNewModal from './AddNewModal';

const MouseContainer = (props) =>{
const [show,setShow] = useState(false);
const toggle = () => setShow(!show);
return (
    <div>
        <button onClick={()=>setShow(!show)}>Toggle</button>
        <p>{show && <AddNewModal show={props.show} setShow={props.setShow}/>}</p>
    </div>
     )
}export default MouseContainer;

还有一个像这样呈现模态的子组件：

import React, {useState} from 'react';
import { Modal, Button } from 'react-bootstrap';
import AddNewForm from './AddNewForm';

const AddNewModal = (show,setShow) => {
return(
    <div>
    <Modal show={show} setShow={setShow}> 
    <Modal.Header>
      <Modal.Title>Modal heading</Modal.Title>
    </Modal.Header>
    <Modal.Body><AddNewForm/></Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={(props)=>props.setShow(!show)}>
        Cancel
      </Button>
    </Modal.Footer>
  </Modal>
    </div>
  )
}export default AddNewModal;

如何更新统计数据，以便 "cancel" 按钮在单击时关闭模式？

Answer 1

我认为您几乎已经完成了以下更改

import React, {useState} from 'react';
import { Modal, Button } from 'react-bootstrap';
import AddNewForm from './AddNewForm';

const AddNewModal = ({show,setShow}) => {
return(
    <div>
    <Modal show={show}> 
    <Modal.Header>
      <Modal.Title>Modal heading</Modal.Title>
    </Modal.Header>
    <Modal.Body><AddNewForm/></Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={()=>setShow(!show)}>
        Cancel
      </Button>
    </Modal.Footer>
  </Modal>
    </div>
  )
}

Answer 2

如果我没理解错的话，你是在用 useState 钩子控制模态框。如果是这样，您的问题是关于您将哪些道具传递给 AddNewModal 组件。

您正在正确创建挂钩：

const [show, setShow] = useState(false);

但是，您向 AddNewModal 组件传递了错误的道具。您正在传递一个 setShow 和一个 show 来自 MouseContainer 组件中的道具，这里：

<p>{show && <AddNewModal show={props.show} setShow={props.setShow} />}</p>

但是，要使用钩子，您应该传递您声明的变量：

<p>{show && <AddNewModal show={show} setShow={setShow} />}</p>

我不熟悉 bootstrap 框架，但我认为模态组件的属性 show 正在控制是否显示模态。如果是这种情况，您也可以删除条件渲染，从而导致：

<AddNewModal show={show} setShow={setShow} />

这是 MouseContainer 组件的更新代码：

import React, { useState } from 'react';
import AddNewModal from './AddNewModal';

const MouseContainer = (props) => {
  const [show,setShow] = useState(false);
  const toggle = () => setShow(!show);

  return (
    <div>
        <button onClick={()=>setShow(!show)}>Toggle</button>
        <AddNewModal show={show} setShow={setShow} />
    </div>
  )
}

此外，您在 AddNewModal 上有一个小字体：

要立即在功能组件声明中获得所需的道具字段，必须使用对象解构 [1]，为此使用大括号：

const AddNewModal = ({ show, setShow }) => {

这样做，您并没有像在 MouseContainer 组件中那样声明 props 对象。所以你不能在函数中使用它。

这是你更新的AddNewModal：

import React, {useState} from 'react';
import { Modal, Button } from 'react-bootstrap';
import AddNewForm from './AddNewForm';

const AddNewModal = ({ show, setShow }) => {
  return (
    <div>
      <Modal show={show} setShow={setShow}> 
        <Modal.Header>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body><AddNewForm/></Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShow(!show)}>
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  )
}

来源：

[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

如何使用反应挂钩将父组件中声明的状态更新到子组件

How to update the state declared in parent component to a child component using react hook

reactjs

react-modal

react-hooks