reactでiframeの要素を取得したい

Question

前提・実現したいこと

next js (typescript)でiframeの要素を取得して、scrollHeightを設定できる様にしたいです

発生している問題・エラーメッセージ

reactだとcontentDocumentが使えないため、どの様にIframeの要素を取得すればいいかわからないです

該当のソースコード

export const Test: NextPage<Props> = () => {

const iframe = document.getElementById("iframe");
const scrollHeight = iframe.contentDocument.documentElement.scrollHeight;
return (
       <iframe
           width='100%'
           id='iframe'
           src='test'
          ></iframe>
);
};

試したこと

このサイトを参考にして、

 const obj = ReactDOM.findDOMNode(this);
this.setState({
      "iFrameHeight":  obj.contentWindow.document.body.scrollHeight + 'px'});

この様にしましたが、取得できませんでした。

Answer 1

以下の様にHTMLIframeElementにキャストしたらできました

export const Test: NextPage<Props> = () => {
    useEffect(() => {
        const iframe = document.getElementById("iframe") as HTMLIframeElement;
        const scrollHeight = iframe.contentDocument.documentElement.scrollHeight;
    }, [])

    return (
        <iframe
            width='100%'
            id='iframe'
            src='test'
        ></iframe>
    );
};

Answer 2

Reactでは、コンポーネント内の変数はレンダリング前に定義されるため、質問者さんが試したように要素を取得することはできません。

関数コンポーネント利用時のマウント後の操作を定義する場合は useEffect を使います。
質問者さんの例に習うと、以下のソースコードで取得できるかと思います。

export const Test: NextPage<Props> = () => {
    useEffect(() => {
        const iframe = document.getElementById("iframe");
        const scrollHeight = iframe.contentDocument.documentElement.scrollHeight;
    }, [])

    return (
        <iframe
            width='100%'
            id='iframe'
            src='test'
        ></iframe>
    );
};

ただし、useEffect 内で定義された変数 scrollHeight は useEffect 外で使うことはできません。
この後やりたい処理がどのようなものなのか分かりませんが、useEffect 内で完結できるような処理であればこちらで問題ないと思います。

Comments

[otaaa]

ご回答していただきありがとうございました。
useEffectを使ってみましたが、contentDocumentが使えず、
「プロパティ 'contentDocumentが' は型 'HTMLElement' に存在しません」
となります。
他の解決方法がありましたら、教えて頂けないでしょうか？

[maisumakun]

> 「プロパティ 'contentDocumentが' は型 'HTMLElement' に存在しません」

HTMLIframeElementにキャストしてください。