JSX案例实践（七）——Tab效果：基于JSX实现

最新推荐文章于 2023-04-13 01:36:38 发布

viceen

最新推荐文章于 2023-04-13 01:36:38 发布

阅读量286

点赞数

分类专栏： react知识文章标签： js reactjs

本文链接：https://blog.csdn.net/weixin_44867717/article/details/112386970

版权

react知识专栏收录该内容

54 篇文章 1 订阅

订阅专栏

JSX案例实践（七）——Tab效果：基于JSX实现

Tab效果：基于JSX实现

let tabData = [{
  id: 1,
  title: 'tom',
  content: 'catch jerry'
}, {
  id: 2,
  title: 'jerry',
  content: '调戏 tom'
}, {
  id: 3,
  title: 'spike',
  content: '被 tom and jerry 一块调戏'
}]

// 当前选中的id
let currentId = 2

let btns = [];
let divs = [];

tabData.forEach(item => {
  // 产生btn列表
  btns.push(<button className={currentId===item.id?'active': ''} key={item.id}>{item.title}</button>)
  // 产生div列表
  divs.push(<div className={currentId===item.id?'active': ''} key={item.id}>{item.content}</div>)
})

let element = (
  <div className='tab'>
    {btns}
    {divs}
  </div>
)

文件结构

在这里插入图片描述

公共html文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="./style/style.css">
  <!-- 第一步：引入相关js库文件 -->
  <script type="text/javascript" src="./lib/react.development.js"></script>
  <script type="text/javascript" src="./lib/react-dom.development.js"></script>
  <!-- babel文件的作用：编译React代码，使之变成原生js代码才可以在浏览器中运行 -->
  <script type="text/javascript" src="./lib/babel.min.js"></script>
</head>

<body>
  <!-- 第二步：页面中需要提供一个容器 -->
  <div id="root"></div>
  <!-- 第三步：可以基于React实现前端功能 -->
  <script type="text/babel" src="./js/08-Tab案例.js"></script>
</body>

</html>

在VScode中，在VScode中打开，需安装插件Live Server，右键打开Open With Live Server,打开页面

js文件夹同层级新建style文件夹，其下新建文件style.css

实例01-基本布局

style.css文件

.tab .title button.active {
  background-color: lightblue;
}

.tab .desc {
  height: 200px;
  width: 300px;
  background-color: lightblue;
  display: none;
}
.tab .desc.active {
  display: block;
}

js文件

/*
  Tab案例实践
*/

let tab = (
  <div className="tab">
    <div className="title">
      <button className='active'>浪潮之巅</button>
      <button>数学之美</button>
      <button>智能时代</button>
    </div>
    <div className='desc active'>IT巨头的兴衰史</div>
    <div className='desc'>数学的应用场景</div>
    <div className='desc'>新兴的技术潮流</div>
  </div>
)

ReactDOM.render(tab, document.getElementById('root'))

显示

在这里插入图片描述

实例02-动态填充数据

style样式文件不变

js文件如下

/*
  Tab案例实践
*/

let tabData = [{
  id: 1,
  title: '浪潮之巅',
  desc: 'IT巨头的兴衰史'
}, {
  id: 2,
  title: '数学之美',
  desc: '数学的应用场景'
}, {
  id: 3,
  title: '智能时代',
  desc: '新兴的技术潮流'
}]
let currentId = 1

let titles = []
let descs = []
tabData.forEach(item => {
  titles.push(<button className={currentId===item.id?'active':''} key={item.id}>{item.title}</button>)
  descs.push(<div className={currentId===item.id?'desc active': 'desc'} key={item.id}>{item.desc}</div>)
})

let tab = (
  <div className="tab">
    <div className="title">
      {titles}
    </div>
    {descs}
  </div>
)

// let tab = (
//   <div className="tab">
//     <div className="title">
//       <button className='active'>浪潮之巅</button>
//       <button>数学之美</button>
//       <button>智能时代</button>
//     </div>
//     <div className='desc active'>IT巨头的兴衰史</div>
//     <div className='desc'>数学的应用场景</div>
//     <div className='desc'>新兴的技术潮流</div>
//   </div>
// )

ReactDOM.render(tab, document.getElementById('root'))

显示同上

viceen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSX案例实践（七）——Tab效果：基于JSX实现

JSX案例实践（七）——Tab效果：基于JSX实现Tab效果：基于JSX实现let tabData = [{ id: 1, title: 'tom', content: 'catch jerry'}, { id: 2, title: 'jerry', content: '调戏 tom'}, { id: 3, title: 'spike', content: '被 tom and jerry 一块调戏'}]// 当前选中的idlet currentId
复制链接

扫一扫