react.js 应用程序中 iframe 下的 Reactstrap 模态

Question

我正在 react.js 中制作一个应用程序，我使用了 react-frame-component 来创建 iframe。在那个 iframe 中，我为 Modal (reactstrap) 编写了代码。此模式正在我的应用程序 window 中打开。我希望它只在那个 iframe 中打开。

在 reactstrap git 回购中创建相关问题。如果您知道覆盖 Modal 文档对象的任何方法，请告诉我。问题：https://github.com/reactstrap/reactstrap/issues/1326

应用link：https://q8lp3kyr5w.codesandbox.io/

代码：https://codesandbox.io/s/q8lp3kyr5w

组件

import React from "react";
import ReactDOM from "react-dom";
import { Modal, ModalBody, Button } from "reactstrap";
import Frame from "react-frame-component";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";

class ModalComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({ modal: !this.state.modal });
  }

  render() {
    return (
      <div>
        <Frame>
          <Button onClick={this.toggle}>Toggle Modal</Button>
          <Modal isOpen={this.state.modal} toggle={this.toggle}>
            <ModalBody>
              <br />
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum,
              ipsam? A id numquam inventore, cumque debitis similique eos
              maiores provident? Sed alias odit fuga, repellat ducimus
              voluptatum aliquid quis pariatur?
            </ModalBody>
          </Modal>
        </Frame>
      </div>
    );
  }
}

const App = () => (
  <div>
    <b>How to open modal in this iframe?</b>
    <ModalComp />
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

css:

.App {
  font-family: sans-serif;
  text-align: center;
}

Answer 1

截至目前，reactstrap 不提供将文档作为 props 传递的工具。您可以使用反应模态。请参阅 github 问题 link 共享的问题。

react.js 应用程序中 iframe 下的 Reactstrap 模态

Reactstrap modal under an iframe in react.js application

iframe

modal-dialog

reactjs

reactstrap