<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jsx样式介绍</title>
<style>
.demo{
width: 300px;
height: 300px;
line-height: 80px;
text-align: center;
color: red;
border: 1px solid red;
}
.title{
color:plum
}
.subtitle{
}
.details{
}
.box1{
background: darkcyan;
}
.box2{
background: lawngreen;
}
</style>
<!-- react的核心组件第一个加载 -->
<script src="js/react.min.js"></script>
<!-- react-dom ReactDOM对DOM节点的一点操作 -->
<script src="js/react-dom.min.js"></script>
<script src="js/browser.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var yang = {
color:'blue',
background:'yellow',
fontSize:'20'
};
var Demo = React.createClass({
getInitialState:function(){
return{
onOff:true
}
},
abc:function(){
console.log(this.state)
this.setState({
onOff:!this.state.onOff
})
},
render:function(){
// this当前的组件
return <div className='demo'>
<h1 onClick={this.abc} className='title' style={{color:'yellow',background:'red'}}>默认标题</h1>
<p className='subtitle'>说明</p>
<p className={this.state.onOff?'box1':'box2'} onClick={this.abc}>这个</p>
</div>
}
})
ReactDOM.render(<Demo />,document.getElementById('app'))
</script>
</body>
</html>
jsx react 写三元表达式
猜你喜欢
转载自blog.csdn.net/qq_33026699/article/details/83546666
今日推荐
周排行