react 父子组件传值tab切换源码

最新推荐文章于 2024-08-16 09:07:05 发布

IT、木昜

最新推荐文章于 2024-08-16 09:07:05 发布

阅读量779

点赞数

分类专栏： React React全家桶

本文链接：https://blog.csdn.net/qq_37212162/article/details/80248247

版权

React 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

React全家桶

19 篇文章 2 订阅

订阅专栏

react 最简单的选项卡源码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>tab切换</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

        <!--数据请求-->
        <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>

        <style>
            .tab1,
            .tab2 {
                width: 100px;
                height: 100px;
                background: pink;
            }
        </style>
    </head>

    <body>
        <div id="root"></div>
    </body>

</html>
<script type="text/babel">

    ReactDOM.render(
    <div>
        {/*点击第一个按钮的时候,实现的是选项卡1的显示 选项卡2隐藏 点击第二个按钮的时候,实现的是选项卡2的显示 选项卡1隐藏*/}
        <button onClick={ 
            function (){
                document.getElementsByClassName('tab1')[0].style.display='block'
                document.getElementsByClassName('tab2')[0].style.display='none'
            }
        }>tab1</button>
        <button onClick={ 
            function(){
                document.getElementsByClassName('tab1')[0].style.display='none';
                document.getElementsByClassName('tab2')[0].style.display='block';
            }


        }>tab2</button>

        {/*给第二个设置默认隐藏*/}
        <div className="tab1">tab1</div>
        <div className='tab2' style={{display:"none"}}>tab2</div>
    </div>, document.getElementById('root') );

</script>