Question

我正在react.js中创建一个应用程序，并且已经使用react-frame-component来创建iframe。在该iframe中，我编写了Modal（reactstrap）代码。该模式正在我的应用程序窗口中打开。我只希望在该iframe中打开它。

在reactstrap git repo中创建了相关问题。如果您知道有什么方法可以覆盖Modal的文档对象，请告诉我。问题：https://github.com/reactstrap/reactstrap/issues/1326

应用链接：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还没有提供将文档作为道具传递的工具。您可以使用react-modal。请参阅有问题的github问题链接。

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

1 个答案: