<!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>
时间： 2024-10-06 12:03:53