反应：使用dangerallySetInnerHTML插入时，脚本标记不起作用
我试图使用React中的dragonallySetInnerHTML属性设置从服务器发送的html以显示在div中。我里面也有script标签，并使用在html内相同定义的函数。我在这里在JSFiddle中给出了错误示例。
这是测试代码：
var x = '<html><scr'+'ipt>alert("this.is.sparta");function pClicked() {console.log("p is clicked");}</scr'+'ipt><body><p onClick="pClicked()">Hello</p></body></html>';
var Hello = React.createClass({
displayName: 'Hello',
render: function() {
return (<div dangerouslySetInnerHTML={{__html: x}} />);
}
});
我检查了该脚本标记并将其添加到DOM，但是无法调用该脚本标记中定义的功能。如果这不是正确的方法，那么还有其他方法可以注入脚本标签的内容。
问题答案：
这是完成工作的一种肮脏方式，对这里发生的事情有一些解释，您可以通过正则表达式提取脚本内容，并且仅使用react渲染html，然后在组件中装入脚本标记中的内容在全球范围内运行。
var x = '<html><scr'+'ipt>alert("this.is.sparta");function pClicked() {console.log("p is clicked");}</scr'+'ipt><body><p onClick="pClicked()">Hello</p></body></html>';
var extractscript=/<script>(.+)<\/script>/gi.exec(x);
x=x.replace(extractscript[0],"");
var Hello = React.createClass({
displayName: 'Hello',
componentDidMount: function() {
// this runs the contents in script tag on a window/global scope
window.eval(extractscript[1]);
},
render: function() {
return (<div dangerouslySetInnerHTML={{__html: x}} />);
}
});
ReactDOM.render(
React.createElement(Hello),
document.getElementById('container')
);
-
为什么onclick不起作用？但是，当我在不同的脚本标记中定义函数时，它是有效的。
-
问题内容： 我正在尝试学习react.js，但被困在“ Hello World”脚本中。 我的index.html： 和src / helloworld.js： 当我把这个代码里面的文件，它工作正常，但是当我将其移动到单独的文件中我得到的空白页，并控制台错误： 怎么了 问题答案： 您收到该错误的原因是： 您已经从本地文件系统（例如通过双击）加载了，而不是通过Web服务器加载了 JSX转换器是脚本的
-
我有一个php脚本，从一个表中获取数据，然后尝试将获得的数据插入到第一个表的第二个表副本中： 插入查询工作正常，但有一种情况下会出现异常：其中一个字段包含失败查询的字符exp：INSERT INTO table2（id，Field1，Field2）值（'12'，'Company'，'Kurt's Reifen-Shop'）异常来自字符如何插入包含此字符的php变量。
-
问题内容： 我想使用reactjs文档中描述的reactjs中的标记。 我使用babel，因此我输入的标记如下： 不幸的是，导入语句不起作用。标记未定义。我必须如何导入此处标记的标记才能使用它？ 问题答案： 下面是使用一种方法用： 确保已安装 包含在您的项目文件中： “dependencies”: { “react”: “^0.13.3”, “marked”: “^0.3.5” }, 导入您的 （
-
问题内容： 我试图将onscroll事件处理程序添加到特定的dom元素。看下面的代码： 代码非常简单，如您所见，我想处理div＃list滚动。当我运行此示例时，它不起作用。所以我尝试直接在render方法上绑定this._handleScroll，它也不起作用。 因此，我打开了chrome inspector，直接使用以下命令添加了onscroll事件： 它正在工作！我不知道为什么会这样。这是Re
-
问题内容： 为什么colspan属性在React中不起作用？我创建了呈现以下内容的简单组件： 编辑：解决 这是解决方案。React期望属性名称为 colSpan ，而不是colspan。在浪费了荒谬的时间去发现这个小小的邪恶事实之后，想出了这一点。 问题答案： 来自React的DOM差异文档： 所有DOM属性和属性（包括事件处理程序）都应包含驼峰，以与标准JavaScript样式保持一致。 如果您