Ruby's Louvre

每天学习一点点算法

导航

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>

posted on 2015-06-24 13:27  司徒正美  阅读(10304)  评论(0)    收藏  举报