Установить содержание <script> в React компонент

стороне сервера

У меня есть этот компонент:Установить содержание <script> в React компонент

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> 
     ) 
    } 
}

как я могу добавить встроенный скрипт внутри <script></script> тегов?

Если попробовать это:

 getScript() { 

     const config = JSON.stringify({ 
      env: process.env.NODE_ENV 
     }); 

     return 'define(\"@config\", [], function() {' + 
      ' return ' + config +';' + 
      '});' 
     } 


     <head> 
      <script>{this.getScript()} </script> 
     </head>

Я получаю это на переднем конце:

<html><head><script data-main="/js/main" src="/vendor/require.js"></script><script>define(&quot;@config&quot;, [], function() { return {&quot;env&quot;:&quot;local&quot;};}); </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>

браузер не может разобрать это, потому что я получаю: " символы вместо " или '

источник

2017-01-21 Alexander Mills

Самое лучшее, что нужно сделать, это, вероятно, использовать РЕАКТ врожденный объект - dangerouslySetInnerHTML - см эту ссылку на React документы:

https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

сначала прочитать документы! затем посмотрите на мое решение ниже.

Единственный способ, которым я получил эту функцию, работая было следующее:

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> 
     ) 
    } 
}

источник

2017-01-22 04:43:42

Спасибо, это именно то, что я искал. – runios

Не уверен, что это удовлетворит ваши потребности, но вы можете поместить содержимое своего скрипта внутри компонентного метода, а затем вызвать метод м в 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> 
     ) 
    } 
}

источник

2017-01-21 22:15:20

, что вероятно, будет работать, позвольте мне попробовать, я думаю, this.scriptContents просто возвращает строку –

спасибо это близко , однако, когда я попробую вашу методологию по какой-то причине, цитаты или символы апострофа не попадают в браузер правильно, знаете ли вы, как я мог бы их каким-то образом избежать? Наверное, можно было это посмотреть. –

Я думаю, что это может быть ответ: http://stackoverflow.com/questions/8749001/escaping-html-entities-in-javascript-string-literals-within-the-script-block –

Установить содержание <script> в React компонент

ответ

Смежные вопросы