tengo este componente:
export class Demo extends React.Component<DemoProps, any> { private foo: number; constructor(props: DemoProps) { super(props); } render() { return ( <html> <head> <script> // I would like to add an inline script here </script> </head> <body> <div id="root"> (hello world) </div> <div> <progress id="hot-reload-progress-bar" value="100" max="100"></progress> </div> </body> </html> ) } } ¿Cómo puedo agregar un script en línea dentro de las etiquetas <script></script> ?
Si prueba esto:
getScript() { const config = JSON.stringify({ env: process.env.NODE_ENV }); return 'define(\"@config\", [], function () {' + ' return ' + config +';' + '});' } <head> <script>{this.getScript()} </script> </head>Me sale esto en la parte delantera:
<html><head><script data-main="/js/main" src="/vendor/require.js"></script><script>define("@config", [], function () { return {"env":"local"};}); </script></head><div><progress id="hot-reload-progress-bar" value="100" max="100"></progress></div><body><div id="root">Initial Home Page</div></body></html> El navegador no puede analizar esto porque obtengo el: " caracteres en lugar de " o '
Probablemente, lo mejor que puede hacer es usar la instalación innata de React, dangerouslySetInnerHTML SetInnerHTML, consulte este enlace a los documentos de React:
https://facebook.github.io/react/docs/dom-elements.html#peligrosamentesetinnerhtml
¡ Lea los documentos primero ! luego mira mi solución a continuación.
La única forma en que conseguí que esta función funcionara fue con lo siguiente:
export class Demo extends React.Component<DemoProps, any> { constructor(props: DemoProps) { super(props); } getScript() { // return a string representing JS code const config = JSON.stringify({ env: process.env.NODE_ENV }); // return a plain JS object with the __html property // set to the string return {__html:'define("@config", [], function () {' + ' return ' + config +';' + '});'} } render() { return ( <html> <head> <script dangerouslySetInnerHTML={this.getScript()}/> </head> <body> <div id="root"> </div> </body> </html> ) } }No estoy seguro de si esto satisfaría sus necesidades, pero podría poner el contenido de su script dentro de un método de componente y luego llamar al método desde jsx
export class Demo extends React.Component<DemoProps, any> { private foo: number; constructor(props: DemoProps) { super(props); } scriptContents(){ //contents of the script in here } render() { return ( <html> <head> <script> {this.scriptContents()} </script> </head> <body> <div id="root"> (hello world) </div> <div> <progress id="hot-reload-progress-bar" value="100" max="100"></progress> </div> </body> </html> ) } }