<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!--react的与dom相关的一些功能-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--将浏览器不支持的jsx语法转化为js语法-->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<link rel="stylesheet" href="./css/style.css"/>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
class Bigcontent extends React.Component{
constructor(props){
super(props)
this.state={
show:1
}
}
render(){
return(
<div className="warp">
<div className="header">
<div>
<img src="img/1-1.png" alt="" />
<img src="img/1-3.png" alt="" />
<img src="img/1-4.png" alt="" />
</div>
</div>
<Main num={this.state.show}></Main>
<div className="footer">
<div className="f_1" onClick={()=> {
//tab切换
this.setState({
show:1
})
}}><img src="img/footer01.png" alt=""/></div>
<div className="f_2" onClick={ ()=> {
this.setState({
show:2
})
}}><img src="img/footer02.png" alt=""/></div>
<div className="f_3" onClick={ ()=> {
this.setState({
show:3
})
}}><img src="img/footer03.png" alt=""/></div>
</div>
</div>
)
}
}
//头部
//主体
class Main extends React.Component{
constructor(porps){
super(porps)
this.state={
arr:[
{"img":"img/1-5.png","name":"八维游戏团队","desc":"院办-张梦丹:[图片]","time":"5-9","id":"1"},
{"img":"img/1-5.png","name":"1509","desc":"讲师-高辉:[图片]","time":"5-9","id":"2"},
{"img":"img/1-5.png","name":"设计系综合群","desc":"班主任-王大鹏:[鼓掌]","time":"1-11","id":"3"},
{"img":"img/1-5.png","name":"四阶段教研室讨论组","desc":"陈雪萍:日考答案","time":"1-10","id":"4"},
{"img":"img/1-5.png","name":"高端大气上档次2班","desc":"丁建军-党员关系:[图片]","time":"1-8","id":"5"},
{"img":"img/1-5.png","name":"柳一小永远的车队","desc":"壮壮-我回去吧:[图片]","time":"1-7","id":"6"},
{"img":"img/1-5.png","name":"八维 漆老师","desc":"全体消息:[图片]","time":"1-6","id":"7"},
{"img":"img/1-5.png","name":"游戏1508A设计","desc":"文件-十二单元:[图片]","time":"1-3","id":"8"},
{"img":"img/1-5.png","name":"设计系的大神们","desc":"讲师-罗青:[图片]","time":"1-1","id":"9"}
]
}
}
render(){
console.log(this.props);
if(this.props.num==1){
return <div className="m_1"><ul>
{
// console.log(this.state)
this.state.arr.map((ele,index)=>{
return <li key={index}>
<span><img src={ele.img} alt=""/></span>
<span>
<p>{ele.name}</p>
<p>{ele.desc}</p>
</span>
<span> {ele.time}</span>
</li>
})
}
</ul></div>
}else if(this.props.num==2){
return <div className="m_2">main2</div>
}else {
return <div className="m_3">main3</div>
}
}
}
//渲染页面
ReactDOM.render(
<Bigcontent/>,
document.getElementById('app')
);
</script>
</body>
</html>如果要修改成js三元运算符直接把if条件判断修改成三元运算符