1. ホーム
  2. iframe

[解決済み] リアクトコンポーネントにiframeを挿入する

2022-03-05 20:53:45

質問

小さな問題があります。あるサービスにデータをリクエストした後、レスポンスとしてiframeコードを受け取りました。

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

これをモーダルコンポーネントにpropsとして渡して表示させたいのですが、単に {this.props.iframe} をレンダリング関数で使用すると、明らかに文字列として表示されます。

reactでhtmlとして表示するか、JSXを使って表示するか、どちらが良いでしょうか?

どのように解決するのですか?

プロパティを使用することができます。 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>

からすべての属性をコピーすることもできます。 文字列 ( 質問に基づいて、サーバーから文字列として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>