react 二级tab切换，有点象二级路由，声明我的数据都是fetch渲染的json数据
实现思路
<!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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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>
<!--数据请求-->
<script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--引入jQuery-->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!--引入css-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var bus=$("#example")
/*
* 二级切换实现思路
* 1.首先要实现一级切换，
* 先给nav组件里的标签设置点击事件，然后使用非父子组件传值，父组件使用jQuery里的方法trigger（）发送点击的状态就是数组的下标，然后子组件是在componentDidMount声明周期函数，用on方法来接收，并设置状态,设置公共 状态show来接收点击事件传过来的值.在使用三元条件判断实现组件的显示隐藏。
* 先给二级组件添加点击事件并设置状态show，然后在 constructor声明周期钩子函数中，设置公共 状态show来接收点击事件传过来的值，然后通过父子组件传值。实现二级切换
*
*
*
*
* */
//头部
class Header extends React.Component{
render(){
return(
<div className="header">
<img src="./img/e_03.png" alt=""/>
</div>
)
}
}
//二级切换
class M1 extends React.Component{
constructor(props){
super(props)
this.state={
arr:[],
}
}
render(){
return(
<div className="rmain">
<div className="t">
{this.props.name}
</div>
<ul>
{
this.state.arr.map((ele,index)=> {
return (
<li key={index}>
<div className="l_img">
<img src={ele.img} alt=""/>
</div>
<div className="l_title">
<h1>{ele.name}</h1>
<p>月销量{ele.num}</p>
<p>￥{ele.pirce}</p>
</div>
</li>
)
})
}
</ul>
</div>
)
}
componentDidMount(){
var url="json/foot.json"
fetch(url).then((res)=>{
return res.json()
}).then((res)=>{
// console.log(res)
this.setState({
arr:res
})
})
}
}
class M2 extends React.Component{
constructor(props){
super(props)
this.state={
arr:[],
}
}
render(){
return(
<div className="rmain1"> {this.props.name}</div>
)
}
}
class M3 extends React.Component{
constructor(props){
super(props)
this.state={
arr:[],
}
}
render(){
return(
<div className="rmain1"> {this.props.name}</div>
)
}
}
class M4 extends React.Component{
constructor(props){
super(props)
this.state={
arr:[],
}
}
render(){
return(
<div className="rmain1"> {this.props.name}</div>
)
}
}
class M5 extends React.Component{
constructor(props){
super(props)
this.state={
arr:[],
}
}
render(){
return(
<div className="rmain1"> {this.props.name}</div>
)
}
}
class M6 extends React.Component{
constructor(props){
super(props)
this.state={
arr:[],
}
}
render(){
return(
<div className="rmain1"> {this.props.name}</div>
)
}
}
class M7 extends React.Component{
constructor(props){
super(props)
this.state={
arr:[],
}
}
render(){
return(
<div className="rmain1"> {this.props.name}</div>
)
}
}
class M8 extends React.Component{
constructor(props){
super(props)
this.state={
arr:[],
}
}
render(){
return(
<div className="rmain1"> {this.props.name}</div>
)
}
}
class M9 extends React.Component{
constructor(props){
super(props)
this.state={
arr:[],
}
}
render(){
return(
<div className="rmain1"> {this.props.name}</div>
)
}
}
class M10 extends React.Component{
constructor(props){
super(props)
this.state={
arr:[],
}
}
render(){
return(
<div className="rmain1"> {this.props.name}</div>
)
}
}
class M11 extends React.Component{
constructor(props){
super(props)
this.state={
arr:[],
}
}
render(){
return(
<div className="rmain1"> {this.props.name}</div>
)
}
}
//一级切换
class Tab extends React.Component{
constructor(){
super()
this.state={
arr:[],
num:4,
name:""
}
}
render(){
return(
<div className="tab" id="tab">
<div className="left">
<ul>
{
this.state.arr.map((ele,index)=>{
return <li key={index} id={index+1} ref="name" onClick={
(e)=>{
var str=e.target.id
var list=e.target
var lis=document.getElementsByTagName('li')
for (var i=0;i<lis.length;i++){
lis[i].setAttribute("class","")
}
list.setAttribute("class","active")
var Name=list.innerText;
console.log(Name)
this.setState({
num:str,
name:Name
})
}
}>{ele.name}</li>
})
}
</ul>
</div>
<div className="right">
{
this.state.num==1?<M1 name={this.state.name}></M1>:
(this.state.num==2?<M2 name={this.state.name}></M2>:this.state.num==3?<M3 name={this.state.name}></M3>:this.state.num==4?<M1 name={this.state.name}></M1>:this.state.num==5?<M5 name={this.state.name}></M5>:this.state.num==6?<M6 name={this.state.name}></M6>:this.state.num==7?<M7 name={this.state.name} ></M7>:this.state.num==8?<M8 name={this.state.name}></M8>:this.state.num==9?<M9 name={this.state.name}></M9>:this.state.num==10?<M10 name={this.state.name}></M10>:<M11 name={this.state.name}></M11>)
}
</div>
</div>
)
}
componentDidMount(){
var url="json/list.json"
fetch(url).then((res)=>{
return res.json()
}).then((res)=>{
// console.log(res)
this.setState({
arr:res.list
})
})
}
}
class Tab2 extends React.Component{
render(){
return(
<div className="tab2">2222</div>
)
}
}
class Tab3 extends React.Component{
render(){
return(
<div className="tab3">3333</div>
)
}
}
//用于盛放二级切换的组件
class Main extends React.Component{
constructor(){
super()
this.state={
show:1
}
}
render(){
return(
<div className="main">
{this.state.show==1?<Tab></Tab>:(this.state.show==2?<Tab2></Tab2>:<Tab3></Tab3>)}
</div>
)
}
componentDidMount(){
bus.on("aaa",(event,data)=>{
this.setState({
show:data
})
})
}
}
//导航部分
class Nav extends React.Component{
constructor(){
super()
this.state={
arr:[],
}
}
componentWillMount(){
var url="json/nav.json"
fetch(url).then((res)=>{
return res.json()
}).then((res)=>{
// console.log(res)
this.setState({
arr:res.nav
})
})
}
render(){
return(
<div className="nav">
{
this.state.arr.map((ele,index)=>{
return <span key={index} id={index+1} onClick={
(e)=>{
var str=e.target.id
// console.log(str)
bus.trigger("aaa",str)
}
}>{ele.name}</span>
})
}
</div>
)
}
}
//底部
class Footer extends React.Component{
render(){
return(
<div className="footer">
<img src="./img/e_20.png" alt=""/>
</div>
)
}
}
ReactDOM.render(
<div className="warp">
<Header/>
<Nav/>
<Main/>
<Footer/>
</div> ,
document.getElementById('example')
);
</script>
</body>
</html>