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

Question

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

使用call调用

htmlContent变量从外部源获取，此变量中存在以下变量。

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

varInside未被替换。尝试了几种将HTML转换为反应标记的选项

1. 由react to set HTML
提供的API
2. React HTML解析器正在使用npm模块react-html-parser
3. 对HTML的反应是使用npm模块react-to-html

我们得到类似

的输出



同样，script标记console.log无法调用其内部render方法或html的一部分来自外部来源。如果有一个JS函数是标记的一部分，存在于其他一些JS库中，我们正在检查它是否可以执行。

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