[解決済み] リアクトコンポーネントに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>
関連
-
[解決済み] IFrameからボーダーを取り除く
-
[解決済み] どうすれば、iframe内にあるFlowplayer 5.2でフルスクリーンを有効にできますか?
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] Reactのこの3つの点は何をするところなのでしょうか?
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] setStateを呼び出さずにReactコンポーネントを強制的に再レンダリングすることは可能ですか?
-
[解決済み] jQuery/JavaScript:iframeのコンテンツにアクセスする
-
[解決済み] ウェブページがiframe内に読み込まれているのか、それともブラウザのウィンドウに直接読み込まれているのかを識別するにはどうしたらよいですか?
-
[解決済み] Reactコンポーネント外でのクリックを検出する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン