自己写的React小例子

发布时间：2020-12-15 03:27:33 所属栏目：百科来源：网络整理

导读：用了之后发表下对React的看法，怎么说呢，我感觉还没有拼字符串爽，React适用于复杂的页面，唯一优点就是灵活度高，特点就是将html和js揉在一起，做简单的页面的话就是牛刀杀鸡的感觉。上代码： !DOCTYPE htmlhtml head meta charset="gb2312" titleBasic Ex

用了之后发表下对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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!