用了之后发表下对React的看法，怎么说呢，我感觉还没有拼字符串爽，React适用于复杂的页面，唯一优点就是灵活度高，特点就是将html和js揉在一起，做简单的页面的话就是牛刀杀鸡的感觉。上代码：
<!DOCTYPE html>
<html>
<head>
<Meta charset="gb2312">
<title>Basic Example</title>
<script src="../../lib/react-0.14.7/build/react.js"></script>
<script src="../../lib/react-0.14.7/build/react-dom.js"></script>
<script src="../../lib/react-0.14.7/build/browser.min.js"></script>
<script src="../../lib/react-0.14.7/build/jquery-1.7.2.min.js"></script>
<style>
.tb{
border-collapse:collapse;
}
.tb td{
border:1px solid #eee;width:100px;
}
</style>
<script type="text/babel">
/*var names=['小明','小红','小芳'];
ReactDOM.render(
<div>
{
names.map(function(name){
return <div>hellow,{name}</div>
})
}
</div>,document.getElementById("xx")
);*/
/*var names=[<div>小明</div>,<div>小红</div>,<div>小芳</div>];
ReactDOM.render(
<div>
{names}
</div>,<div>小芳</div>];
var Hello=React.createClass({
render:function(){
return <div>{this.props.name.map(function(name){
return name
})}</div>
}
});
ReactDOM.render(
<Hello name={names}></Hello>,document.getElementById("xx")
);*/
/*var Hello=React.createClass({
render:function(){
return <div>{React.Children.map(this.props.children,function(c){
return <li>{c}</li>
})}</div>
}
});
ReactDOM.render(
<Hello>
<div>小明<p>哈哈</p></div>
<div>小红</div>
<div>小芳</div>
</Hello>,document.getElementById("xx")
);*/
/*var Hello=React.createClass({
getdate:function(){
$(this.refs.txt).val(new Date().toLocaleTimeString().toString());
},render:function(){
return <div>
<input type='text' value={new Date().toLocaleTimeString()} ref='txt' />
<input type='button' value='按钮' ref='bt' onClick={this.getdate} />
</div>
}
});
ReactDOM.render(
<Hello />,document.getElementById("xx")
);*/
var Hello=React.createClass({
getInitialState:function(){
return {loading:true,data:null};
},query:function(){
this.setState({
loading:false,data:[
{index:"1",name:"小明1",sex:"男",tel:"123456789"},{index:"2",name:"小明2",{index:"3",name:"小明3",{index:"4",name:"小明4",{index:"5",name:"小明5",{index:"6",name:"小明6",{index:"7",name:"小明7",{index:"8",name:"小明8",{index:"9",name:"小明9",{index:"10",name:"小明10",tel:"123456789"}
]
});
},componentDidMount:function(){
},render:function(){
if(this.state.loading){
return <input type='button' value='查询' onClick={this.query} />;
}
else{
var lt=this.state.data;
var trs=lt.map(function(item){
return (
<tr>
<td>{item.index}</td><td>{item.name}</td><td>{item.sex}</td><td>{item.tel}</td>
</tr>
);
});
return (
<div>
<table className="tb">{trs}</table>
<input type="button" value="查询" onClick={this.query} />
</div>
);
}
}
});
ReactDOM.render(
<Hello/>,document.getElementById("xx")
);
</script>
</head>
<body>
<div id="xx"></div>
</body>
</html>
原文链接：https://www.f2er.com/react/306411.html