无法在无状态功能中使用引导反应模式答案

【问题标题】：Unable to use bootstrap-react modal in stateless function无法在无状态功能中使用引导反应模式
【发布时间】：2025-12-15 07:50:01
【问题描述】：

我想要做的是添加引导反应模式并从无状态函数中触发它。我能找到的所有示例都需要更改组件状态中的“显示”，但是由于我没有使用 af 组件，所以我真的不知道该怎么做。

https://react-bootstrap.github.io/components/modal/

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

https://react-bootstrap.github.io/components/modal/

你需要state 在某个地方显示模态。您可以使用钩子在功能性（不是真正的“无状态”）组件中使用useState 来完成它。

function App() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="primary" onClick={() => setOpen(true)}>
        Launch demo modal
      </Button>

      <Modal show={open} onHide={() => setOpen(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setOpen(false)}>
            Close
          </Button>
          <Button variant="primary" onClick={() => setOpen(false)}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

代码沙盒：https://codesandbox.io/embed/z2ky5l128l

如果您不想这样做，则需要从树中较高的组件传递 prop，例如：

class App extends React.Component {
  state = {
    open: true,
  }
  render() {
    return <ModalComponent open={open} hide={() => this.setState({open: false})} />
  }
}

function ModalComponent = ({open, hide}) => (
  <Modal show={open} onHide={hide}>
    <Modal.Header closeButton>
      <Modal.Title>Modal heading</Modal.Title>
    </Modal.Header>
    <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={hide}>
        Close
      </Button>
    </Modal.Footer>
  </Modal>
)

【讨论】：

【解决方案2】：

只需像下面这样从父级传递可见状态

 class parent extends Component {

   state = {
     modalVisibility : false
   }

   handleModalVisibility = (action)=> this.setState({modalVisibility : action})

   return (
       <div>
        <button onClick={this.handleModalVisibility.bind(this,true)} >Show Modal</button>
       //use this props to show or cancel the modal
       <ModalComponent visibility ={this.state.modalVisibility} handleModal={this.handleModalVisibility} />
       </div>
   )

 }

【讨论】：

你不必绑定箭头函数
我只是在绑定参数 true 而不是写 onClick={()=>this.handleModalVisibility(true)}

【解决方案3】：

我想你可以用 useState 做到这一点 https://reactjs.org/docs/hooks-state.html

【讨论】：