react +axios渲染数据 非父子组件传值tab切换 源码

最新推荐文章于 2022-03-29 19:09:01 发布
最新推荐文章于 2022-03-29 19:09:01 发布
阅读量625 收藏
点赞数
分类专栏： React React全家桶
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37212162/article/details/80301630
版权

html

<!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/babel-standalone@6.15.0/babel.min.js"></script>

    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="./css/style.css"/>
    <!--字体图标-->


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

</div>
<script type="text/babel">
    //获取标签的名
    var bus=$("#app");
    //头部
    class Header extends React.Component{
        render(){
            return(
                <div className="header">
                    <div>
                        <img src="img/3_01.jpg" alt="" />
                    </div>
                </div>
            )
        }
    }
    //主体
    class Main extends React.Component{
        constructor(props){
            super(props)
            this.state={
                show:1,
                arr:[]
            }
        }
        render(){
            console.log(this.state.show)
            return(
                <div className="main">
                    {
                        this.state.show==1?<Main1></Main1>:(this.state.show==2?<Main2></Main2>:(this.state.show==3?<Main3></Main3>:<Main4></Main4>))
                    }
                 </div>
            )
        }
        //接到trigger 发来的数据并绑定
        componentDidMount(){
            bus.on('test',(event,pson)=>{
                // console.log(pson)
                this.setState({
                    show:pson
                })
            })
        }
    }
    // 内容
    class Main1 extends React.Component{
        constructor(props){
            super(props)
            this.state={
                show:0,
                arr:[]
            }
        }
        render(){
            return(
                <div className="main">
                    <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>
                </div>
                )
        }
        //使用axios获取数据
        componentDidMount(){
            var url="./js/tsconfig.json"
            axios.get(url).then((res)=>{
                console.log(res)
                this.setState({
                    arr:res.data
                })
            })
        }
    }
    class Main2 extends React.Component{
        render(){
            return(
                    <div className="m_2">
                    <h1>这是微信的第二个页面</h1>
                </div>

        )
        }
    }
    class Main3 extends React.Component{
        render(){
            return(
                    <div className="m_3">
                        <h1>这是微信的第三个页面</h1>
                    </div>

            )
        }
    }
    class Main4 extends React.Component{
        render(){
            return(
                    <div className="m_4">
                        <h1>这是微信的第四个页面</h1>
                    </div>

             )
        }
    }
    //底部
    class Footer extends React.Component{
        constructor(props){
            super(props)
            this.state={
                show:0
            }
        }
        render(){
            return(
                <div className="footer">
                    <div className="f_1" onClick={ ()=>{
                        this.setState({
                            show:1
                        })
                    }}><img src="img/3_12.jpg" alt=""/></div>
                    <div className="f_2" onClick={ ()=>{
                       this.setState({
                           show:2
                       })
                    }}><img src="img/3_14.jpg" alt=""/></div>
                    <div className="f_3" onClick={ ()=>{
                        this.setState({
                            show:3
                        })
                    }}><img src="img/3_16.jpg" alt=""/></div>
                    <div className="f_4" onClick={ ()=>{
                       this.setState({
                           show:4
                       })
                    }}><img src="img/3_18.jpg" alt=""/></div>
                </div>
            )
        }
        //使用trigger发送数据
        componentDidUpdate(){
            bus.trigger("test",this.state.show)
        }
    }
    ReactDOM.render(
        <div className="warp">
            <Header/>
            <Main/>
            <Footer/>
        </div>
       ,
        document.getElementById('app')
    );
</script>
</body>
</html>

css

m_style.css

/* CSS Document */
body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,tr,td,form,input,select,textarea,span,img,a,em,strong,*{ margin:0; padding:0;}
body{ font-family:"微软雅黑"; font-size:12px; color:#000000;}
ul,ol,li{ list-style:none;}
h1,h2,h3,h4,h5,h6{ font-size:14px;}
input,select,textarea{ vertical-align:middle;}
img{ border:none; vertical-align:middle;}
a{ text-decoration:none; color:#333333;}
a:hover{ color:#009999;}
.clear{ clear:both; height:0px; width:0px; overflow:hidden;}
.html{ font-size: 62.5%;}

style.css

@import "m_style.css";#app{display:flex;flex-direction:column;width:100%;height:100%}#app .warp{display:flex;flex-direction:column;width:100%;height:100%}#app .warp .header{width:10rem;height:1.944444rem}#app .warp .header img{width:100%;height:auto;vertical-align:middle}#app .warp .main{width:10rem;height:14.375rem;overflow-y:scroll}#app .warp .main .m_1{width:10rem;height:14.375rem}#app .warp .main .m_1 ul li{width:10rem;height:1.847222rem;text-align:center;display:flex}#app .warp .main .m_1 ul li span{line-height:1.847222rem;flex:4}#app .warp .main .m_1 ul li span:nth-child(1){width:1.416666rem;height:1.416666rem}#app .warp .main .m_1 ul li span:nth-child(1) img{width:1.416666rem;height:1.416666rem;margin-left:.333333rem}#app .warp .main .m_1 ul li span:nth-child(2){float:left}#app .warp .main .m_1 ul li span:nth-child(2) p{line-height:.694444rem}#app .warp .main .m_2{width:10rem;height:14.375rem}#app .warp .main .m_3{width:10rem;height:14.375rem}#app .warp .main .m_4{width:10rem;height:14.375rem}#app .warp .footer{width:10rem;height:1.208333rem;line-height:1.208333rem;background:#fcfcfc;display:flex;flex-direction:row}#app .warp .footer .f_1{flex:3;width:1.083333rem;height:1.208333rem;margin:0 auto}#app .warp .footer .f_1 img{width:1.083333rem;height:1.208333rem;vertical-align:middle;text-align:center;margin-left:.930555rem}#app .warp .footer .f_2{flex:3;width:1.083333rem;height:1.208333rem;margin:0 auto;text-align:center}#app .warp .footer .f_2 img{width:1.083333rem;height:1.208333rem;vertical-align:middle;text-align:center;margin-left:.930555rem}#app .warp .footer .f_3{flex:3;width:1.083333rem;height:1.208333rem;margin:0 auto;text-align:center}#app .warp .footer .f_3 img{width:1.083333rem;height:1.208333rem;vertical-align:middle;text-align:center;margin-left:.930555rem}#app .warp .footer .f_4{flex:3;width:1.083333rem;height:1.208333rem;margin:0 auto;text-align:center}#app .warp .footer .f_4 img{width:1.083333rem;height:1.208333rem;vertical-align:middle;text-align:center;margin-left:.930555rem}

json数据

[
  {"img":"img/3_04.jpg","name":"团队","desc":"院办:[图片]","time":"5-9","id":"1"},
  {"img":"img/3_07.jpg","name":"1509","desc":"讲师:[图片]","time":"5-9","id":"2"},
  {"img":"img/3_09.png","name":"综合群","desc":"班主任-王大鹏:[鼓掌]","time":"1-11","id":"3"},
  {"img":"img/3_07.jpg","name":"教研室讨论组","desc":"陈雪萍:日考答案","time":"1-10","id":"4"},
  {"img":"img/3_09.png","name":"高端大气上档次2班","desc":"丁建军-党员关系:[图片]","time":"1-8","id":"5"},
  {"img":"img/3_04.jpg","name":"柳一小永远的车队","desc":"壮壮-我回去吧:[图片]","time":"1-7","id":"6"},
  {"img":"img/3_09.png","name":"漆老师","desc":"全体消息:[图片]","time":"1-6","id":"7"},
  {"img":"img/3_07.jpg","name":"游戏1508A设计","desc":"文件-十二单元:[图片]","time":"1-3","id":"8"},
  {"img":"img/3_04.jpg","name":"设计系的大神们","desc":"讲师-罗青:[图片]","time":"1-1","id":"9"}
]

建议大家多自己写代码，少copy代码。

IT、木昜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【react 函数组件tab切换】
志在四方的博客
06-07 776
react 函数组件的学习与使用 `react函数组件tab切换从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。我们可以将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。以便提高组件的复用性，优化代码。函数组件语法更短、更简单，这使得它更容易开发、理解和测试.........
react梳理之组件通信(传值)
小张的博客
03-23 3114
react组件的通信属于开发基础知识,今天来梳理一下,当然rudex还按老规矩排除在外,如同上篇文章的hooks一样,单独梳理 一.react组件常用的通信情景 父子组件通信 兄弟组件通信(非父子组件) 1.父子组件通信 props传值 props传值算是react中最基本的传值方式,如果使用或者学习过vue的会了解到,props也是vue的父子组件基本的传值方式,通过父组件使用子组件的时候绑定值,在子组件中接收props值来完成,props是一个对象,对象内接收了父组件通过键值对方式传递的值,在.
react非父子组件传值
wjw0125的博客
12-16 276
这里采用的是发布订阅者模式 订阅者交出一个回调函数，传给中央服务，发布者已发布，就调用中央服务的回调函数 创建observer.js文件 即订阅者文件 const observer = { list: [], subscribe(callback) { this.list.push(callback) }, dispatch(data) { this.list.forEach(item => { item(data
react中类组件传值
夜空孤狼啸的博客
03-29 1517
类组件传值 父子 组件传值 子 传 父： 子组件：事件的触发 sendMsg=()=>{ this.props.person(); } 父组件： <Child person={this.getMsg}></Child> getMsg=(data)=>{
非父子组件间的传值
王依米
05-16 1113
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;非父子组件的传值（bus/总线、发布者订阅模式、观察者模式&lt;/title&gt; &lt;script type="text/javascript" src="js/v
react + ts or vue + ts 通用axios封装的方法。
07-21
本篇文章将深入探讨如何在React+TS或Vue+TS项目中对axios进行通用封装，以便更好地管理API请求。 首先，我们了解下什么是axios。Axios是一个基于Promise的HTTP库，它可以在浏览器和node.js中使用。它具有丰富的特性...
基于 React+router+redux+axios和Flask+MySQL+Pytorch 的视觉问答管理系统源码.zip
01-16
基于 React + router + redux + axios 和 Flask + MySQL + Pytorch 的视觉问答管理系统源码.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者...
react+antd+axios
04-11
react+antd+axios
react PC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts
最新发布
03-07
该架构已解决大部分坑，主要用于react@18.2.0PC端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、...
react+mobx+router+axios+antd搭建单页应用
01-20
1. 在React组件中，我们可以使用`@observer`装饰器（来自`mobx-react`）将组件与MobX状态关联起来，实现数据驱动视图。 2. 通过`<BrowserRouter>`和`<Route>`，我们可以定义路由规则，实现页面之间的跳转。 3. Axios...
React父子组件间的传值的方法
10-17
在单页面里面，父子组件传值是比较常见的，这篇文章主要介绍了React父子组件间的传值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
非父子组件之间的三种传值办法
Qian_mos的博客
04-22 3739
非父子组件之间的传值 兄弟组件的传值：总线—发布订阅者—观察者模式 Vue.prototype.属性 = new Vue()，使Vue的原型上的属性等于Vue实例 <div id="root"> <child content="miss"></child> <child content="mos"></child> &l...
React组件之间的传值
kongjunchao159的博客
05-25 5059
父组件向子组件传值？传参，props接收 子组件向父组件传值？回调函数 这里重点说一下无关系组件之间的交互 React中没有任何嵌套关系的组件之间如何传值？ 方案一：全局广播的方式，即Publish/Subscribe，需要引入PubSubJS库 链接：https://github.com/mroderick/PubSubJS 例子： //主容器 var Main = React.c
redux实现非父子关系的组件之间的传参(基础实现,不使用Provider)
my_love_download的博客
10-11 638
真正开发项目的时候会经常遇到非父子关系的组件需要相互传递参数,这里实现一个基础版本的Redux,实际开发中,不使用Provider是极少的,这里仅仅作为一个复习的基础知识作为记载 1.安装Redux npm install redux 2.项目中配置redux 1.根目录下新建store文件夹,然后在该文件夹下新建index.js文件和reducer.js文件   1.1.index.js文...
【React】知识点归纳：react中使用axios获取后台服务器数据
Dream_Lee的博客
01-28 2379
React-Ajax: react中使用axios获取后台服务器数据，所有的数据请求统一写到一个文档里面 react项目中获取数据的工具比较多，比如fetch 、axios, 这2个应该是使用最多的。 在练习的时候遇到一个问题：就是将所有的数据请求统一写到一个文档里面，比如get-api.js 目的就是后期的维护，方便修改。但是axios 获取到的数据是无法return出去的 所以我的实现方案...
React请求数据渲染页面
Linceo的博客
06-27 5409
1、使用react-fetch数据发送请求 （1）get方法： componentDidMount() { fetch('url') .then(res => res.json()) .then(json => this.setState({ list: json })) } （2）post方法： comp...
React 父子组件传值,defaultProps,PropTypes
litter_lj的博客
05-25 417
1.父子向子组件传值，可以传值，也可以传方法，也可以传整个组件this <Child title={this.state.title}/> // this.state.title是父级的state数据,传入属性的方式传值给子组件 2.子组件获取值 class Child extends Component{ constructor(props){ s...
通过props和state实现React子父组件传参
只如初见0706的博客
11-26 6192
1.实现效果 在index页面（父组件）引入一个子组件，改变index中的状态机state,通过props在子组件响应内容的变化页面操作如下 在index页面（父组件）引入一个子组件，改变index中的状态机state,通过props在子组件响应内容的变化页面操作如下 单击a按钮 通过props和state实现React子父组件传参 > image2017-11-26
React父组件异步传值问题解决
chdyiboke的博客
03-04 5779
父组件异步获取数据，在子组件中通过props获取不到最新传递过来的值？解决方案如下： 使用 react生命周期中的componentWillReceiveProps： 父组件中异步请求数据 data 传向子组件： &lt;UploadLog renderVersion={ this.renderBuildVersion } ...
React + React Router + Redux + Axios + Ant Design
07-28
React + React Router + Redux + Axios + Ant Design 是一套常用的前端开发技术栈，用于构建现代化的 Web 应用程序。下面我会逐个介绍这些技术的作用和特点： - React 是一个用于构建用户界面的 JavaScript 库，它采用组件化的思想，使得开发者可以将复杂的 UI 拆分成独立可复用的组件，提高代码的可维护性和复用性。 - React Router 是一个用于在 React 应用中实现路由功能的库，它可以帮助开发者实现页面之间的跳转和导航，支持动态路由配置和嵌套路由等功能。 - Redux 是一个用于管理应用状态的 JavaScript 库，它采用单一状态树的设计思想，通过创建纯函数的方式来处理状态变化，使得状态管理变得可预测和可维护。 - Axios 是一个基于 Promise 的 HTTP 客户端，它可以在浏览器和 Node.js 中发送 HTTP 请求，并支持拦截请求和响应、自动转换 JSON 数据等功能，使得前后端通信更加方便和灵活。 - Ant Design 是一个开箱即用的 UI 组件库，它提供了丰富的组件和样式，可以帮助开发者快速构建美观、高效的用户界面。 通过使用这些技术，开发者可以构建出具有良好用户体验、高性能和可维护性的现代化 Web 应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT、木昜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值