react设置innerHTML
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
var Test = React.createClass({
getInitialState: function() {
return {html: '<a href="#">1</a><a href="#">2</a><a href="#">3</a>'};
},
handleChange: function() {
this.setState({html: "strong"})
},
render: function() {
return (
<div onClick={this.handleChange} dangerouslySetInnerHTML={{__html: this.state.html}}></div>
);
}
}); React.render(<Test />, document.getElementById('example')); </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body> <script type="text/jsx"> var Test = React.createClass({
getInitialState: function() {
return {results: [{id:"aaa",name:"xxx"},{id:"bbb",name:"yyy"},{id:"ccc",name:"zzz"}] };
},
change: function(){
console.log("111")
this.setState({
results : [{id:"xxx",name:"xx1x"},{id:"yyy",name:"yy2y"},{id:"zzz",name:"zz3z"}]
})
},
render: function() {
var results = this.props.results;
return (
<ol onClick={this.change}>
{this.state.results.map(function(result) {
return <li key={result.id}>{result.name}</li>;
})}
</ol>
);
}
}); React.render(<Test />, document.body); </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title></title>
<script src="react.js"></script>
<script src="JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
var Grocery = React.createClass({ render: function() {
return (
<div>
<div>{this.props.aaa}</div>
<hr/>
</div>
);
}
}); var GroceryList = React.createClass({ render: function() {
return (
<div>
{this.props.items.map(function(item, i) {
return <Grocery aaa={item}/>
}, this)}
</div>
);
}
}); React.render(
<GroceryList items={['Apple', 'Banana', 'Cranberry']} />, document.getElementById("example")
);
</script>
</body>
</html>
react设置innerHTML的更多相关文章
- React设置宽度的坑
[React设置宽度的坑] 我们知道通过ref可以获取DOM元素,通过style属性可以给此DOM元素添加样式. 但下面两行的赋值是无效的: this.HomeRootDiv.style.width= ...
- React中innerHTML的坑
[React中innerHTML的坑] 通过React Ref机制返回的对象,是一个阉割的DOM对象,并非原始DOM对象.比如,这个阉割版的DOM对象没有innerHTML对象. <button ...
- js插件设置innerHTML时,在IE8下报错“未知运行时错误”
问题描述: 网站中使用了一个js插件,设置innerHTML时,在IE8下报错“未知运行时错误”: <div id=”divContainer”> <a name=”link”> ...
- 使用innerHTML属性向head中插入字符时报“无法设置 innerHTML 属性。 该操作的目标元件无效”的错误
向head中动态插入script文件,代码如下: var sc = document.createElement("script"); sc.src = "//www.c ...
- react设置多个className
在一个元素上设置样式,有一个固定的样式,然后还有一个使用三元运算符根据条件添加的样式. 比如说有一个固定样式"title": <div className="tit ...
- react设置默认state和默认props
1.默认状态设置 1.constructor (ES6) constructor(props) { this.state = { n: ... } } 2.getInitialState (ES5) ...
- IE中部分版本的浏览器对Select标签设置innerHTML无效的问题
这样写的代码:document.getElementById('data_list').innerHTML = data;//data是ajax返回的数据 结果发现在ie10的兼容模式下面下拉框没有内 ...
- react 设置代理(proxy) 实现跨域请求
一,对于使用creat-react-app构建的项目,可以直接在package.json下配置,具体如下 "proxy": "http://api.xxxx.com&qu ...
- React设置proxy后依旧报CROS错误
1.判断表单数据是否为后端接收的类型 POST GET2.axios自动转换问题 手动添加标头这份表单数据包括了files (二进制数据)而标头显示是JSON格式 不符 所以报CROS 更多文章请移步 ...
随机推荐
- Oracle安装完成后如何创建表空间及用户
1.select file_Name from dba_data_files;(查询表空间) 2.create tablespace QUAN datafile '/app/ADMINISTRATOR ...
- Javascript-关于for in和forEach
JS-for in:用来遍历对象 //遍历对象 for in var opts={name:'xiaofei',age:'28岁',job:'web前端工程师'} for (var k in opts ...
- System.Drawing.Graphics.FromImage(Image image)引发内存不足
原因:图片位深度导致的,c# gui 应该无法将32位jpg格式的图片load到内存中 通过对比可成功处理的图片 和 不能处理的图片,发现 CMYK(印刷格式)的图片是无法处理的,具体需要深入 .ne ...
- c helloworld
#include <stdio.h> int main() { int i; printf("%s","hello, world"); } 1.#i ...
- 用vlan实现同一网段的的各部门之间有的可以通信有的不可以通信
日前老师上课演示一个项目:实现公司同一网段的各个部门之间有的可以通信有的无法通信.我们用的是思科测试软件模拟操作,个人觉得很好用. 在刚开始做这个项目的时候我以为端口是对应的,如图,交换机 ...
- Linux性能优化 第四章 性能工具:特定进程CPU
4.1进程性能统计信息 4.1.1. 内核时间VS用户时间 一个应用程序所耗时间最基本的划分是内核时间与用户时间.内核时间是消耗在Linux内核上的时间,而用户时间则是消耗在应用程序或库代码上的时间. ...
- RxJava响应式编程,入门的HelloWorld;
RxJava核心就是异步,它也被称之为响应式编程:最大的优势就是随着程序逻辑变得越来越复杂,它依然能够保持简洁. Rxjava真的是让人又爱又恨,因为它的线程切换和链式调用真的很好用,但是入门却有点难 ...
- JIRA敏捷sprint需求统计设置
1.JIRA->My Dashboard ->添加它的过滤条件 2.过滤条件产生,将sql拷贝至步骤1编辑的JQL中
- scp(secure copy)安全拷贝
scp(secure copy)安全拷贝 (1)scp定义: scp可以实现服务器与服务器之间的数据拷贝.(from server1 to server2) (2)基本语法 命令 递归 要拷贝的文 ...
- 18.纯 CSS 创作 404 文字变形为 NON 文字的交互特效
原文地址:https://segmentfault.com/a/1190000014818274 感想: positon:absolute 和 :hover HTML代码: <!-- < ...