Question

我有这个组件：

＆＃xA;＆＃xA;

 导出类Demo扩展了React.Component＆lt; DemoProps，any＆gt; {＆＃XA; private foo：number;＆＃xA;＆＃xA;构造函数（props：DemoProps）{＆＃xA;超级（道具）;＆＃XA; }＆＃XA;＆＃XA; render（）{＆＃xA;返回（＆＃xA;＆lt; html＆gt;＆＃xA;＆lt; head＆gt;＆＃xA;＆＃xA;＆lt; script＆gt;＆＃xA; //我想在此处添加内联脚本＆＃xA;＆lt; / script＆gt;＆＃xA;＆＃xA;＆lt; / head＆gt;＆＃xA;＆lt; body＆gt;＆＃xA;＆lt; div id =“root”＆gt;＆＃xA;（hello world）＆＃xA; ＆lt; / div＆gt;＆＃xA;＆lt; div＆gt;＆＃xA;＆lt; progress id =“hot-reload-progress-bar”value =“100”max =“100”＆gt;＆lt; / progress＆gt;＆＃ xA;＆lt; / div＆gt;＆＃xA;＆lt; / body＆gt;＆＃xA;＆lt; / html＆gt;＆＃xA;）＆＃xA; }＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

如何在＆lt; script＆gt;＆lt; / script＆gt;中添加内联脚本？ 标签？

＆＃xA;＆＃xA;

如果试试这个：

＆＃xA;＆＃xA;

  getScript（）{＆＃xA ;＆＃XA; const config = JSON.stringify（{＆＃xA; env：process.env.NODE_ENV＆＃xA;}）;＆＃xA;＆＃xA;返回'define（\“@ config \”，[]，function（）{'+＆＃xA;'return'+ config +';'+＆＃xA;'}）;'＆＃xA; }＆＃XA;＆＃XA;＆＃XA; ＆LT; HEAD＆GT;＆＃XA; ＆lt; script＆gt; {this.getScript（）}＆lt; / script＆gt;＆＃xA; ＆lt; / head＆gt;＆＃xA;

＆＃xA;＆＃xA;

我在前端得到了这个：

＆＃xA;＆＃xA;

 ＆lt; html＆gt;＆lt; head＆gt;＆lt; script data-main =“/ js / main”src =“/ vendor / require.js”＆gt;＆lt; / script＆gt;＆lt; script＆gt; define（＆amp; “@ config＆amp; quot;，[]，function（）{return {＆amp; quot; env＆amp; quot;：＆amp; quot; local＆amp; quot;};}）; ＆lt; / script＆gt;＆lt; / head＆gt;＆lt; div＆gt;＆lt; progress id =“hot-reload-progress-bar”value =“100”max =“100”＆gt;＆lt; / progress＆gt;＆lt; / div＆gt; ＆lt; body＆gt;＆lt; div id =“root”＆gt;初始主页＆lt; / div＆gt;＆lt; / body＆gt;＆lt; / html＆gt;＆＃xA;

＆＃xA;＆＃xA ;

浏览器无法解析此问题，因为我得到了：＆amp; quot; 字符而不是“或'

＆ #xA;

Answer 1

不确定这是否满足您的需求，但您可以将脚本内容放在组件方法中，然后从jsx中调用该方法

name/arity

Answer 2

最好的办法是使用React的天生设施 - dangerouslySetInnerHTML - 请参阅React docs的链接：

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

在React serverside组件中设置<script>的内容

2 个答案: