Réagissez: La balise de script ne fonctionne pas lorsqu'elle est insérée avec dangerouslySetInnerHTML

Je suis en train de définir html envoyé à partir de mon serveur pour afficher dans une div à l'aide de dangerouslySetInnerHTML propriété de Réagir. J'ai également balise de script à l'intérieur et à utiliser les fonctions définies dans les même à l'intérieur de que html. J'ai fait l'exemple de l'erreur dans JSFiddle ici.

C'est le code de test:

var x = '<html><scr'+'ipt>alert("this.is.sparta");function pClicked() {console.log("p is clicked");}</scr'+'ipt><body><p onClick="pClicked()">Hello</p></body></html>';

var Hello = React.createClass({
  displayName: 'Hello',
  render: function() {
    return (<div dangerouslySetInnerHTML={{__html: x}} />);
  }
});

J'ai vérifié et la balise script est ajouté à DOM, mais ne peut pas appeler les fonctions définies à l'intérieur de cette balise de script. Si ce n'est pas la bonne manière est-il un autre moyen par lequel je peux injecter le script contenu de la balise.

source d'informationauteur meteors

Voici un peu d'une sale façon de le faire ,
Un peu d'explications sur ce qui se passe ici , on extrait le contenu du script via une regex , et seulement de rendu html à l'aide de réagir , puis une fois que le composant est monté le contenu dans la balise script est exécuté sur une portée mondiale.

var x = '<html><scr'+'ipt>alert("this.is.sparta");function pClicked() {console.log("p is clicked");}</scr'+'ipt><body><p onClick="pClicked()">Hello</p></body></html>';

var extractscript=/<script>(.+)<\/script>/gi.exec(x);
x=x.replace(extractscript[0],"");

var Hello = React.createClass({
  displayName: 'Hello',
  componentDidMount: function() {
    //this runs the contents in script tag on a window/global scope
    window.eval(extractscript[1]);

  },
  render: function() {
    return (<div dangerouslySetInnerHTML={{__html: x}} />);
  }
});

ReactDOM.render(
  React.createElement(Hello),
  document.getElementById('container')
);

Je ne pense pas que vous devez utiliser la concaténation (+) ici.

var x = '<html><scr'+'ipt>alert("this.is.sparta");function pClicked() {console.log("p is clicked");}</scr'+'ipt><body><p onClick="pClicked()">Hello</p></body></html>';

Je pense que vous pouvez le faire:

var x = '<html><script>alert("this.is.sparta");function pClicked() {console.log("p is clicked");}</script><body><p onClick="pClicked()">Hello</p></body></html>';

Depuis qu'il est passé à dangerouslySetInnerHTML de toute façon.

Mais revenons à la question. Vous n'avez pas besoin d'utiliser des regex pour accéder au script du contenu de la balise. Si vous ajoutez id attribut, par exemple <script id="myId">...</script>vous pouvez facilement accéder à l'élément.

Nous allons voir un exemple de cette mise en œuvre.

const x = `
  <html>
    <script id="myScript">
      alert("this.is.sparta");
      function pClicked() {console.log("p is clicked");}
    </script>
    <body>
      <p onClick="pClicked()">Hello</p>
    </body>
  </html>
`;

const Hello = React.createClass({

  displayName: 'Hello',

  componentDidMount() {
    const script = document.getElementById('myScript').innerHTML;
    window.eval(script);
  }

  render() {
    return <div dangerouslySetInnerHTML={{__html: x}} />;
  }

});

Si vous avez plusieurs scripts, vous pouvez ajouter un attribut de données [data-my-script] par exemple, puis accéder à l'aide de jQuery:

const x = `
  <html>
    <script data-my-script="">
      alert("this.is.sparta");
      function pClicked() {console.log("p is clicked");}
    </script>
    <script data-my-script="">
      alert("another script");
    </script>
    <body>
      <p onClick="pClicked()">Hello</p>
    </body>
  </html>
`;

const Hello = React.createClass({

  constructor(props) {
    super(props);

    this.helloElement = null;
  }

  displayName: 'Hello',

  componentDidMount() {
    $(this.helloElement).find('[data-my-script]').each(function forEachScript() {
      const script = $(this).text();
      window.eval(script);
    });
  }

  render() {
    return (
      <div
        ref={helloElement => (this.helloElement = helloElement)} 
        dangerouslySetInnerHTML={{__html: x}} 
      />
    );
  }

});

Dans tous les cas, il est toujours bon d'éviter d'utiliser evaldonc, une autre option est d'obtenir le texte et ajouter une nouvelle balise script avec l'original du contenu du script au lieu d'appeler eval. Cette réponse suggère une telle approche

une petite extension pour Dasith de réponse pour l'avenir de points de vue...

J'ai eu un problème similaire, mais dans mon cas, j'ai obtenu le code HTML côté serveur et il a fallu un certain temps (une partie de la solution de reporting où backend rendra rapport à html)

donc ce que j'ai fait était très semblables que j'ai manipulé le script qui s'exécute dans le componentWillMount() fonction:

import React from 'react';
import jsreport from 'jsreport-browser-client-dist'
import logo from './logo.svg';
import './App.css';
class App extends React.Component {
constructor() {
super()
this.state = {
report: "",
reportScript: ""
}
}
componentWillMount() {
jsreport.serverUrl = 'http://localhost:5488';
let reportRequest = {template: {shortid: 'HJH11D83ce'}}
//let temp = "this is temp"
jsreport.renderAsync(reportRequest)
.then(res => {
let htmlResponse = res.toString()
let extractedScript = /<script>[\s\S]*<\/script>/g.exec(htmlResponse)[0];
//console.log('html is: ',htmlResponse)
//console.log('script is: ',extractedScript)
this.setState({report: htmlResponse})
this.setState({reportScript: extractedScript})
})
}
render() {
let report = this.state.report
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo"/>
<h2>Welcome to React</h2>
</div>
<div id="reportPlaceholder">
<div dangerouslySetInnerHTML={{__html: report}}/>
</div>
</div>
);
}
componentDidUpdate() {
//this runs the contents in script tag on a window/global scope
let scriptToRun = this.state.reportScript
if (scriptToRun !== undefined) {
//remove <script> and </script> tags since eval expects only code without html tags
let scriptLines = scriptToRun.split("\n")
scriptLines.pop()
scriptLines.shift()
let cleanScript = scriptLines.join("\n")
console.log('running script ',cleanScript)
window.eval(cleanScript)
}
}
}
export default App;

espère que c'est utile...

Vous devez vous connecter pour publier un commentaire.