Вставка iframe в компонент реакции

У меня небольшая проблема. После запроса данных из службы я получил код iframe в ответ.

<iframe src="https://www.example.com/show?data..." width="540" height="450"></iframe>

Я хотел бы передать это как реквизит для моего модального компонента и отобразить его, но когда я просто {this.props.iframe} его в функции рендеринга, он явно отображает его как строку.

Каков базовый способ отображения его как html в реакции?

Ответы

Ответ 1

Вы можете использовать свойство dangerouslySetInnerHTML, как это

const Component = React.createClass({
  iframe: function () {
    return {
      __html: this.props.iframe
    }
  },

  render: function() {
    return (
      <div>
        <div dangerouslySetInnerHTML={ this.iframe() } />
      </div>
    );
  }
});

const iframe = '<iframe src="https://www.example.com/show?data..." width="540" height="450"></iframe>'; 

ReactDOM.render(
  <Component iframe={iframe} />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

Ответ 2

Если вы не хотите использовать dangerouslySetInnerHTML, вы можете использовать приведенное ниже решение

var Iframe = React.createClass({     
  render: function() {
    return(         
      <div>          
        <iframe src={this.props.src} height={this.props.height} width={this.props.width}/>         
      </div>
    )
  }
});

ReactDOM.render(
  <Iframe src="http://plnkr.co/" height="500" width="500"/>,
  document.getElementById('example')
);

здесь доступна демо-версия Демо-версия

Ответ 3

С ES6 вы можете теперь делать это так

Пример Codepen URl для загрузки

const iframe = '<iframe height="265" style="width: 100%;" scrolling="no" title="fx." src="//codepen.io/ycw/embed/JqwbQw/?height=265&theme-id=0&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true">See the Pen <a href="#" onclick="location.href='https://codepen.io/ycw/pen/JqwbQw/'; return false;">fx.</a> by ycw(<a href="#" onclick="location.href='https://codepen.io/ycw'; return false;">@ycw</a>) on <a href="#" onclick="location.href='https://codepen.io'; return false;">CodePen</a>.</iframe>';

Функциональный компонент для загрузки Iframe

function Iframe(props) {
  return (<div dangerouslySetInnerHTML={ {__html:  props.iframe?props.iframe:""}} />);
}

Использование:

import React from "react";
import ReactDOM from "react-dom";
function App() {
  return (
    <div className="App">
      <h1>Iframe Demo</h1>
      <Iframe iframe={iframe} />,
    </div>
  );
}

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

Изменить на CodeSandbox:

https://codesandbox.io/s/react-iframe-demo-g3vst