ReactJS中的自定义组件实例代码
程序员文章站
2022-06-22 10:24:20
react 是一个用于构建用户界面的 javascript 库。
react 主要用于构建ui，很多人认为 react 是 mvc 中的 v（视图）。
react 起源于 face...
react 是一个用于构建用户界面的 javascript 库。
react 主要用于构建ui，很多人认为 react 是 mvc 中的 v（视图）。
react 起源于 facebook 的内部项目，用来架设 instagram 的网站，并于 2013 年 5 月开源。
react 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
react 特点
1.声明式设计 −react采用声明范式，可以轻松描述应用。
2.高效 −react通过对dom的模拟，最大限度地减少与dom的交互。
3.灵活 −react可以与已知的库或框架很好地配合。
4.jsx − jsx 是 javascript 语法的扩展。react 开发不一定使用 jsx ，但我们建议使用它。
5.组件 − 通过 react 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − react 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
可控自定义组件：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
var radio=react.createclass({
getinitialstate:function(){
return {
value:this.props.defaultvalue
};
},
handlechange:function(event){
if(this.props.onchange){
this.props.onchange(event);
}
this.setstate({
value:event.target.value
});
},
render:function(){
var children=[];
var value=this.props.value||this.state.value;
react.children.foreach(this.props.children,function(child,i){
var label=<label key={i}>
<input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value==value} onchange={this.handlechange}/>
{child.props.children}
<br/>
</label>;
children.push(label);
}.bind(this));
return <span>{children}</span>;
}
});
var myform=react.createclass({
getinitialstate:function(){
return ({my_radio:"b"});
},
handlechange:function(event){
this.setstate({
my_radio:event.target.value
});
},
submithandler:function(event){
event.preventdefault();
alert(this.state.my_radio);
},
render:function(){
return (
<form onsubmit={this.submithandler}>
<radio value={this.state.my_radio} name="my_radio" onchange={this.handlechange}>
<option value="a">first option</option>
<option value="b">second option</option>
<option value="c">third option</option>
</radio>
<button type="submit">speak</button>
</form>
)
}
});
reactdom.render(<myform></myform>,document.body);
</script>
</body>
</html>
不可控的自定义组件:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
var radio=react.createclass({
getinitialstate:function(){
return {
value:this.props.defaultvalue
};
},
handlechange:function(event){
if(this.props.onchange){
this.props.onchange(event);
}
this.setstate({
value:event.target.value
});
},
render:function(){
var children=[];
var value=this.props.value||this.state.value;
react.children.foreach(this.props.children,function(child,i){
var label=<label>
<input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value==value} onchange={this.handlechange}/>
{child.props.children}
<br/>
</label>;
children['label'+i]=label;
}.bind(this));
return <span>{children}</span>;
}
});
var myform=react.createclass({
handlesubmit:function(event){
event.preventdefault();
alert(this.refs.radio.state.value);
},
render:function(){
return (
<form onsubmit={this.handlesubmit}>
<radio ref="radio" name="my_radio" defaultvalue="b">
<p value="a">first</p>
<option value="b">second option</option>
<option value="c">third option</option>
</radio>
<button type="submit">speak</button>
</form>
)
}
});
reactdom.render(<myform></myform>,document.body);
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
var radio=react.createclass({
getinitialstate:function(){
return {
value:this.props.defaultvalue
};
},
handlechange:function(event){
if(this.props.onchange){
this.props.onchange(event);
}
this.setstate({
value:event.target.value
});
},
render:function(){
var children=[];
var value=this.props.value||this.state.value;
react.children.foreach(this.props.children,function(child,i){
var label=<label>
<input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value==value} onchange={this.handlechange}/>
{child.props.children}
<br/>
</label>;
children['label'+i]=label;
}.bind(this));
return <span>{children}</span>;
}
});
var myform=react.createclass({
handlesubmit:function(event){
event.preventdefault();
alert(this.refs.radio.state.value);
},
render:function(){
return (
<form onsubmit={this.handlesubmit}>
<radio ref="radio" name="my_radio" defaultvalue="b">
<p value="a">first</p>
<option value="b">second option</option>
<option value="c">third option</option>
</radio>
<button type="submit">speak</button>
</form>
)
}
});
reactdom.render(<myform></myform>,document.body);
</script>
</body>
</html>
总结
以上所述是小编给大家介绍的reactjs中的自定义组件实例代码，希望对大家有所帮助
上一篇： PHP数据源架构模式之表入口模式实例分析
下一篇： Vue.js源码分析之自定义指令详解