Reactstrap модальный под iframe в приложенииact.js - PullRequest
Новая
       32

Reactstrap модальный под iframe в приложенииact.js

0 голосов
/ 18 декабря 2018

Я делаю приложение вact.js, и я использовал response-frame-component для создания iframe.В этом iframe я написал код для Modal (actstrap).Этот модал открывается в моем окне приложения.Я хочу, чтобы он открывался только в этом iframe.

Создана соответствующая проблема в git-repoactstrap.Дайте мне знать, если вы знаете какой-либо способ перезаписать объект документа Модала.выпуск: 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;
}

1 Ответ

0 голосов
/ 20 декабря 2018

На данный момент реактивная лента не предоставляет возможности для передачи документа в качестве реквизита.Вы можете использовать реактивный модал.См. Ссылку на вопрос о GitHub, которой вы поделились.

...