<!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的更多相关文章

  1. React设置宽度的坑

    [React设置宽度的坑] 我们知道通过ref可以获取DOM元素,通过style属性可以给此DOM元素添加样式. 但下面两行的赋值是无效的: this.HomeRootDiv.style.width= ...

  2. React中innerHTML的坑

    [React中innerHTML的坑] 通过React Ref机制返回的对象,是一个阉割的DOM对象,并非原始DOM对象.比如,这个阉割版的DOM对象没有innerHTML对象. <button ...

  3. js插件设置innerHTML时，在IE8下报错“未知运行时错误”

    问题描述: 网站中使用了一个js插件,设置innerHTML时,在IE8下报错“未知运行时错误”: <div id=”divContainer”> <a name=”link”> ...

  4. 使用innerHTML属性向head中插入字符时报“无法设置 innerHTML 属性。 该操作的目标元件无效”的错误

    向head中动态插入script文件,代码如下: var sc = document.createElement("script"); sc.src = "//www.c ...

  5. react设置多个className

    在一个元素上设置样式,有一个固定的样式,然后还有一个使用三元运算符根据条件添加的样式. 比如说有一个固定样式"title": <div className="tit ...

  6. react设置默认state和默认props

    1.默认状态设置 1.constructor (ES6) constructor(props) { this.state = { n: ... } } 2.getInitialState (ES5) ...

  7. IE中部分版本的浏览器对Select标签设置innerHTML无效的问题

    这样写的代码:document.getElementById('data_list').innerHTML = data;//data是ajax返回的数据 结果发现在ie10的兼容模式下面下拉框没有内 ...

  8. react 设置代理(proxy) 实现跨域请求

    一,对于使用creat-react-app构建的项目,可以直接在package.json下配置,具体如下 "proxy": "http://api.xxxx.com&qu ...

  9. React设置proxy后依旧报CROS错误

    1.判断表单数据是否为后端接收的类型 POST GET2.axios自动转换问题 手动添加标头这份表单数据包括了files (二进制数据)而标头显示是JSON格式 不符 所以报CROS 更多文章请移步 ...

随机推荐

  1. SCCM2012 R2实战系列之十一：解决OSD分发Windows7 系统盘盘符为’D’问题

    在SCCM 2012 R2操作系统分发(OSD)中,大家最早做的实验可能就是分发干净的Windows7和Windows 8(或Windows8.1)了吧.但是不可面对的问题就是相同配置的任务序列(只是 ...

  2. Version 版本定义规则

    Version 定义规则:2.3.1012 主版本号: 表示项目的重大架构变更此版本号: 表示较大范围的功能添加和变化增量版本号: 一般表示重大bug修复2.3.1012snapshot   快照al ...

  3. Hibernate JPA 关联关系

    Hibernate JPA 关联关系: 使用cascade做级联操作(只有在满足数据库约束时才会生效): CascadeType.PERSIST: 级联保存,只有调用persist()方法,才会级联保 ...

  4. OpenGL中移动单位中的‘单位’指什么

    opengl 比如 用到glm::translate(x,y,z) 表示 移动x,y,z个单位, 那么这个这个单位是指什么呢?这里的单位不是指像素,是根据投影矩阵的变化而变化的,默认情况下投影矩阵Pr ...

  5. centos7 真实机安装后没有网卡解决办法

    我们在真实机安装完centos7版本后,会发现没有网卡,只有lo口 因为真实机不同你在虚拟机里面,这个时候我们不能连网,更加不要说配置什么静态ip了 是什么原因呢,是因为有些真实机安装了centos系 ...

  6. 2018 oppo校招前端面试题

    1.Es6 2.http请求过程 3.js事件执行流程(蒙蔽中) [默认冒泡,由内到外,] 4.css 样式选择器的优先级 (!important在类选择器和id选择器都可以使用,但不推荐使用) 5. ...

  7. 深度学习 + OpenCV，Python实现实时视频目标检测

    使用 OpenCV 和 Python 对实时视频流进行深度学习目标检测是非常简单的,我们只需要组合一些合适的代码,接入实时视频,随后加入原有的目标检测功能. 在本文中我们将学习如何扩展原有的目标检测项 ...

  8. C#提取双引号中的字符串

    public static void Main(string[] args) { string strtmp = "123\"456\"qqq\"789\&qu ...

  9. for循环循环时间

    )) { Console.WriteLine(dt); } ("2011-5-5")       按需求定义 AddDays函数,   一天一天的增长

  10. CF865D Buy Low Sell High

    /* 贪心来选择, 如果能找到比当前小的, 就用最小的来更新当前的 优先队列即可 */ #include<cstdio> #include<algorithm> #includ ...