Javascript 变量、从外部源获取的标记内的脚本标记未呈现

React组件正在从外部源提取HTML。很少有API能够呈现HTML部分，但如果我们试图在该HTML中包含变量或脚本，那就行不通了。我几乎没试过什么东西。下面是组件的渲染方法

render(){
        const varInside = 'Some Variable Inside';
        return (<div>
                <script>console.log('Hello inside render');</script>
                <div dangerouslySetInnerHTML={{__html: this.state.htmlContent}} />
                <div>React HTML Parser - { ReactHtmlParser(this.state.htmlContent)}</div>
                <div>React to HTML - { htmlToReactParser.parse(this.state.htmlContent)}</div>
                <div>Raw content - { this.state.htmlContent }</div>
            </div>)   
 }

varInside

未被更换。尝试了几个将HTML转换为react标记的选项

API由提供

React HTML解析器正在使用npm模块

使用npm模块对HTML作出反应

我们得到的输出类似于

另外，

script

标记

console.log

不会被调用，无论它的内部

render

方法还是来自外部源的html的一部分。如果有一个JS函数是标记的一部分，存在于其他JS库中，我们将检查它是否可以执行

---

话虽如此，我们为什么要这样做（因为这可能不是正确的方法）。我们正在评估一个用例，其中HTML标记从不同的CMS服务器获取并用于react组件。尝试将reactjs与CMS集成会有一些利弊（CMS以传统方式工作，每个页面都是独立的页面，而reactjs是基于SPA的框架）。但首先我们要评估不同的选项（从CMS公开JSON而不是标记可能是一个选项）。任何建议都会很有帮助。

我很困惑，你发布的示例是什么？看起来每次都在呈现html内容？我从来没有见过这样的脚本注入组件，不确定它是否能工作。啊，

危险的是，setinenerHTML

需要一个具有

字符串

值的对象。将

this.state.htmlContent

设置为值时，尝试将其转换为字符串：

@sandeep:我建议您使用JSON内容而不是完整的HTML标记公开AEM/CMS服务器。当前的方法看起来太复杂，而且容易出错。。你将无法充分利用ReactJS本身的优势，除了以SPA结束。我在我们的大型电子商务网站上使用JSON方法，它工作得很好。在做了一些测试之后，脚本标记就是打破这一点的原因。看看这把小提琴：。您的代码有几个问题，如果您没有将其存储为字符串，那么您将得到错误，因为它是无效的JSX。无论我做了什么，都无法使脚本标记正常工作。您应该查看react头盔，可以动态地将脚本标记添加到头部。你在这里试图做的事情，在React中是无法开箱即用的。这里有一个使用straight JSX（推荐）的版本，我很困惑，你发布的示例是什么？看起来每次都在呈现html内容？我从来没有见过这样的脚本注入组件，不确定它是否能工作。啊，

危险的是，setinenerHTML

需要一个具有

字符串

值的对象。将

this.state.htmlContent

设置为值时，尝试将其转换为字符串：

@sandeep:我建议您使用JSON内容而不是完整的HTML标记公开AEM/CMS服务器。当前的方法看起来太复杂，而且容易出错。。你将无法充分利用ReactJS本身的优势，除了以SPA结束。我在我们的大型电子商务网站上使用JSON方法，它工作得很好。在做了一些测试之后，脚本标记就是打破这一点的原因。看看这把小提琴：。您的代码有几个问题，如果您没有将其存储为字符串，那么您将得到错误，因为它是无效的JSX。无论我做了什么，都无法使脚本标记正常工作。您应该查看react头盔，可以动态地将脚本标记添加到头部。您在这里试图做的事情在React中无法开箱即用。下面是一个使用straight JSX的版本（推荐）

<h2>This is a HTML fragment {varInside}</h2>
<script>console.log('Hello from fragment');</script>