BeginnerEngineerBlog
中の人
中の人

【react 力技】reactでscriptタグを挿入して処理する

公開: 2023-02-27 18:09
更新: 2023-04-05 23:07
3749
react 力技 useEffect innerHTML javascript
最近どう頑張ってもやりたいことが実現できず、力技で乗り切ったのでその紹介です。


こんにちは!

中の人です

最近reactでわけわからーんとハマってしまい、scriptを直接埋め込むという力技に頼ったことがあったので紹介したいと思います。



仕様


buttonを押すたびに色が変わるというシンプルな処理を実装します


実装


通常


まず基本的な実装方法です

import './App.css';
import {useState} from 'react';

function App() {

    let app_style = {
        position: 'absolute',
        top: '50%',
        left: '50%',
    };

    const initialButtonStyle = {
        color: 'initial',
    };

    const [button_style, setButtonStyle] = useState(initialButtonStyle);

    return (
        <div className="App" style={app_style}>
            通常
            <button style={button_style} onClick={() => setButtonStyle(button_style.color === 'red' ? {color: 'initial'} : {color: 'red'} )}>ボタン</button>
        </div>
    );
}

export default App;


多分こんな感じ?になるかと思います。


いい感じですね


力技


本題の力技の実装方法です

import './App.css';
import {useEffect} from 'react';

function App() {

    let app_style = {
        position: 'absolute',
        top: '50%',
        left: '50%',
    };

    // 👇 scriptを埋め込む処理
    let script = null;

    // 同じscriptが量産されるのを防ぐため同じscriptタグがある場合は処理しない
    if (document.querySelector('#crazy_script') === null) {
        script = document.createElement('script');
        script.id = 'crazy_script';

        // innerHTMLでやりたい内容を書く
        script.innerHTML = `
            let button = document.getElementById('button');
            button.addEventListener('click', function (e) {
                console.log('力技'); // 👈ちゃんと反応してるかデバッグ
                if (this.style.color !== 'initial') {
                    this.style.color = 'initial';
                } else {
                    this.style.color = 'red';
                }
            });
        `;
    }

    // reactのレンダリング後にscriptを埋め込みたいのでuseEffectで埋め込む
    useEffect(() => {
        if (script !== null) {
            document.body.appendChild(script);
        }
    })

    return (
        <div className="App" style={app_style}>
            力技
            <button style={{color: 'initial'}} id="button">ボタン</button>
        </div>
    );
}

export default App;


react使う意味ないですやん的なコードですが、こんな感じでscriptタグを無理やり埋め込んで実行することができます。

ちなみにhtmlを見てみると


こんな感じでちゃんとscriptが埋め込まれてますね!

また念の為innerHTMLに書いたscriptが動いているかconsole.logの値を見てみます


ちゃんと動いてるみたいですね!

力技バンザイ!> ヾ(*・∀・)/


終わりに


正直こんな処理書きたく無いんですけどね。。笑

私はこの方法を知った背景として、jsのライブラリって、結構html,js用、react用、vue用とか用意してくれていて便利に使わしていただいてるのですが、react用のライブラリを使うとバグが出て、html用のライブラリ使うとバグが出ないって状況に陥ったんですよね。

で、あれこれ調べたんですが挫折し、服をぽいぽい脱いで発狂してラストパンツの時にじゃあバグが出ないhtml側のライブラリで処理できないかとググってみたところ、意外にも同様の処理を実装したい方々が多くいらっしゃって、そのおかげで私も(社会的に)助かったわけです。
(当たり前ですが推奨はされてなさそうです。)


Helmetってライブラリも便利そうなのでもし同じような実装考えてる方は試してみるといいんじゃないでしょうか?

ということで、時には力技も必要だよねってことで!
おつ!
0
0
0
0
通信エラーが発生しました。
【広告】
似たような記事