您的位置：首页 > Web前端 > React
react基础学习小demo汇总

2017-06-23 11:57 459 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>react demo</title>

<script src="./build/react.js" charset="utf-8"></script>
<script src="./build/react-dom.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script>

<style>
.pstyle{
font-size:20px;
}
</style>

</head>
<body>
<div id="container">

</div>
</body>

<script type="text/babel">
/*-----------------------------------------------------------------------------*/
/*传递props，父组件传递给子组件*/
var HelloMessage = React.createClass({
render: function(){
return <h1>{this.props.helloText}</h1>;
}
});
/*-----------------------------------------------------------------------------*/
/*
react中设置样式的三种形式
1.行内样式，直接在标签中设置样式，style={{}}，用逗号隔开，并且使用驼峰命名法，右边的属性会覆盖左边的属性
2.传入对象当做样式，用对象将样式包裹起来，style={}
3.传统的class设置样式，class写作className
*/
var hStyle = {
titleStyle: {
backgroundColor:"green",
color:"red"
}
}

var ShowMsg = React.createClass({
render: function(){
return(
<div style={{backgroundColor:"yellow",border:"5px solid black"}}>
<h1 style={hStyle.titleStyle}>{this.props.firstRow}</h1>
<p className="pstyle">{this.props.secondRow}</p>
</div>
)
}
});
/*-----------------------------------------------------------------------------*/
/*复合组件*/
var WebName = React.createClass({
render: function(){
return <h1>{this.props.webname}</h1>
}
});

var WebLink = React.createClass({
render: function(){
return <a href={this.props.weblink}>{this.props.weblink}</a>
}
});

var WebShow = React.createClass({
render: function(){
return(
<div>
//props中转站，原始值从ReactDOM.render传过来，再传给子组件
<WebName webname={this.props.wname}/>
<WebLink weblink={this.props.wlink}/>
</div>
)
}
});
/*-----------------------------------------------------------------------------*/
/*遍历子节点*/
/*
ReactDOM.render(
<ListComponent>
<h1>hello</h1>
<p>world</p>
</ListComponent>,
document.getElementById("container")
);
挂载时将会遍历出
<li><h1>hello</h1></li>
<li><p>world</p></li>
*/
var ListComponent = React.createClass({
render: function(){
return(
<ul>
{
React.Children.map(this.props.children, function(child){
return <li>{child}</li>
})
}
</ul>
)
}
});
/*-----------------------------------------------------------------------------*/
/*props验证类型*/
var ShowTitle = React.createClass({
propTypes:{
//title只能为字符串
title: React.PropTypes.string.isRequired
},
render: function(){
return <h1>{this.props.title}</h1>
}
})
/*-----------------------------------------------------------------------------*/
/*给props设置默认值，在挂载时可以省略传递的参数，例如title="xxx"可以省略*/
var MyTitle = React.createClass({
//默认值设置
getDefaultProps:function(){
return {
title: "百度"
};
},
render: function(){
return <h1>{this.props.title}</h1>
}
})
/*-----------------------------------------------------------------------------*/
/*在react中绑定事件*/
var MyButton = React.createClass({
//任意命名事件函数
handleClick :function(){
alert("点击按钮触发的效果")
},
render: function(){
return(
<button onClick={this.handleClick}>{this.props.buttonTitle}</button>
)
}
})
/*----------------------------------------------------------------------------*/
/*state的两个小demo*/
/* demo1：根据复选框的选中状态，改变文字*/
var CheckButton = React.createClass({
getInitialState: function(){
// 设置默认状态，返回一个对象，在对象中设置的属性，将会存储在state当中
//版本更新后应该在constructor中设置
return {
isCheck: false
}
},
handleChange: function(){
//修改状态值，通过this.state读取设置状态值
this.setState({
isCheck: !this.state.isCheck
})
},
render: function(){
//根据状态值，重新渲染render
//在JSX语法中，render中不能直接使用if
var text = this.state.isCheck ? "已选中" :"未选中";
return (
<div>
<input type="checkbox" onChange={this.handleChange}/>{text}
</div>
)
}
})
/*demo2：在文本框中输入值，同步显示在p标签中*/
var Input = React.createClass({
getInitialState: function() {
return {
value: "请输入"
}
},
handleChange: function(event){
this.setState({
//event.target.value获取用户输入的值
value:event.target.value
})
},
render: function() {
var value = this.state.value;
return(
<div>
//在事件中改变状态
<input type="text" value={value} onChange={this.handleChange}/>
<p>{value}</p>
</div>
)
}
})
/*-----------------------------------------------------------------------------*/
/*挂载*/
ReactDOM.render(
<Input/>,
document.getElementById("container")
);
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： javascript react.js
相关文章推荐
新的分享
章节导航