React JS危険なSetInnerHTML内でスクリプトを実行する方法

Question

スクリプトを内部で取得するにはdangerouslySetInnerHTML実行されますか？

class Page extends Component { 

    render() { 
    return (
     <script 
     dangerouslySetInnerHTML={{ __html: ` 
      console.log('hello world'); 
      window.dataLayer = window.dataLayer || []; 
      window.dataLayer.push({ 
      event: 'viewCart' 
      }); 
     ` }} 
     /> 
    ); 
    } 
} 

私はconsole.log('hello world')を実行できません。誰でも助けることができますか？ありがとうございます

Answer 1

セキュリティのためにスクリプトタグが自動的に削除されるため、できません。

JavaScriptを使用して作業するための最良の方法は、componentWillMountまたはcomponentDidMount

class Page extends Component { 

    componentDidMount() { 
    const jsCode = ` 
     console.log('hello world'); 
     window.dataLayer = window.dataLayer || []; 
     window.dataLayer.push({ 
     event: 'viewCart' 
     }) 
    `; 
    new Function(jsCode)(); 
    } 

    // you can do something else here 
    render() { 
    return (
     <noscript /> 
    ); 
    } 
} 

あなたは明らかに任意の文字列を使用することができますから、それを別に文字列を取得し、実行（やeval）することです。私はあなたがサーバーからそれをロードしている可能性があります。

上記の例では、私はnew Function()()を使用しましたが、これはeval()とよく似ていますが、より速く動作します。

私はcomponentDidMountを使用しましたので、ビューが表示された後にスクリプトが実行されることが確実です。 WillとDidマウントのもう一つの違いは、マウントはUniversal（同形）アプリケーションのサーバー側とクライアント側の両方で実行されますが、マウントは、ユニバーサルアプリケーションのクライアント側でのみ実行されることです。