반응 구성 요소에 iframe 삽입

반응 구성 요소에 iframe 삽입

작은 문제가 있어요.서비스에 데이터를 요청한 후 iframe 코드를 받았습니다.

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

이걸 제 모달 컴포넌트에 소품으로 전달해서 전시하고 싶은데{this.props.iframe}렌더 함수에서는 스트링으로 표시됩니다.

리액트 또는 JSX를 사용하여 html로 표시하는 가장 좋은 방법은 무엇입니까?

위험하게 사용하지 않으려면SetInnerHTML 을 사용하면, 이하에 나타내는 솔루션을 사용할 수 있습니다.

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

라이브 데모를 이용하실 수 있습니다 데모

다음과 같이 속성을 사용할 수 있습니다.

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>

또, 모든 어트리뷰트를 문자열로부터 카피할 수 있습니다(질문에 근거해, iframe은 서버로부터 문자열로서 취득됩니다).이러한 문자열은 다음을 포함합니다.<iframe>태그를 붙여 새것으로 넘기다<iframe>태그, 이렇게

/**
 * getAttrs
 * returns all attributes from TAG string
 * @return Object
 */
const getAttrs = (iframeTag) => {
  var doc = document.createElement('div');
  doc.innerHTML = iframeTag;

  const iframe = doc.getElementsByTagName('iframe')[0];
  return [].slice
    .call(iframe.attributes)
    .reduce((attrs, element) => {
      attrs[element.name] = element.value;
      return attrs;
    }, {});
}

const Component = React.createClass({
  render: function() {
    return (
      <div>
        <iframe {...getAttrs(this.props.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>

ES6에서는 이렇게 할 수 있습니다.

로드하는 코드 입력 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="https://codepen.io/ycw/pen/JqwbQw/">fx.</a> by ycw(<a href="https://codepen.io/ycw">@ycw</a>) on <a href="https://codepen.io">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

언급URL : https://stackoverflow.com/questions/33913737/inserting-the-iframe-into-react-component