时间戳

首页 > 解决方案 > 无法在无状态功能中使用引导反应模式

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

问题描述

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

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

标签： reactjsreact-bootstrap

解决方案

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

推荐阅读