专栏首页张培跃React的小案例:&&运算符、元素变量、三目运算符与React的条件渲染都在这里了

React的小案例:&&运算符、元素变量、三目运算符与React的条件渲染都在这里了

今天的知识点不难,主要考验大家伙对代码的阅读能力啦!即将要接触的知识点有&&运算符、元素变量、三目运算符与React的条件渲染……

如下图,要完成一个简单的切换功能:

废话不多说,直接开始读代码吧!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="react/react.development.js"></script>
    <script src="react/react-dom.development.js"></script>
    <script src="react/babel.min.js"></script>
    <style>
        #tag input{
            margin:5px;
            padding:5px;
        }
        #tag input.active{
            background:red;
        }
        #tag div{
            width:500px;
            height:200px;
            border:1px solid green;
            background:yellow;
        }
    </style>
</head>
<body>
<div id="wrap">
</div>
</body>
<script type="text/babel">
    // 定义组件China
    function China(){
        return <div>中国</div>
    }
    // 定义组件Japan
    function Japan(){
        return <div>日本</div>
    }
    // 定义组件Korea
    function Korea(){
        return <div>韩国</div>
    }
    // 定义组件Go,该组件根据props.index来决定显示以上三个中的一个。
    function Go(props){
        //定义数组,用于存放最初定义的三个组件的名字
        var arr=["China","Japan","Korea"];
        // 元素变量:为了有条件的渲染组件,可以通过变量来存储元素。
        // 如下 {arr[props.index]}
        // if(props.index>=0 && props.index<arr.length){
        //     return  (
        //         <div>
        //             {arr[props.index]}
        //         </div>
        //     )
        // }

        // 根据&&运算符的特性来实现条件渲染。
        // 当props.index不满足条件时,即渲染相应组件
        // 其实是一块语法糖,效果同上方注释代码效果相同
        return (
            <div>
                {props.index>=0 && props.index<arr.length && arr[props.index]}
            </div>
        )
    }
    //通过class来定义组件Country
    class Country extends React.Component{
        constructor(props){
            super(props);
            //初始化状态
            this.state={
                index:props.index
            };
        }
        // 定义方法用于改变state.index属性
        change(i){
            this.setState({
                index:i
            })
        }
        render(){
            return (
                <div id="tag">
                    {/*JXS 调用class 需要使用className,通过三元运算符得到结果。*/}
                    <input type="button" className={this.state.index==0?"active":""} value="中国" onClick={()=>{this.change(0)}}/>
                    <input type="button" className={this.state.index==1?"active":""} value="日本" onClick={()=>{this.change(1)}}/>
                    <input type="button" className={this.state.index==2?"active":""} value="韩国" onClick={()=>{this.change(2)}}/>
                    <Go index={this.state.index}/>
                </div>
            )
        }
    }
    ReactDOM.render(
        //指定默认选中项
        <Country index="0"/>,
        document.querySelector("#wrap")
    );
</script>
</html>

就到这吧

本文分享自微信公众号 - 张培跃(zhangpeiyue8),作者:张培跃

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2019前端面试基础题集合!赶紧上车!快!快!快!

    在 ES5.1 里面函数是这样执行的(不讨论use strict和一些特殊情况,JS好复杂的),按如下顺序执行:

    用户1272076
  • React之状态(State)

    现在我们先来通过ES6类React.Component完成一个通过点击按钮对DIV进行显示与隐藏的操作,效果如下:

    用户1272076
  • React之Props,及与state的区别

    组件内可以通过props来获得属性值,看下面的实例先来回顾 一下Props最基本的使用:

    用户1272076
  • wepy repeat标签循环渲染bug解决

    子组件的show控制这个子组件的是否展示的状态,当我们绑定了点击事件之后,点击其中一个子组件。全部几个用repeat渲染出来的子组件都会同时消失或者显示,而不是...

    flytam
  • [举个栗子]增加组件通用性的几个点

    最近在做项目的时候,看到有两个功能一样,但是交互,样式不一样的需求,为了图方便维护,就封装了组件,发现一个看似简单的组件,如果要封装得通用些,要考虑的东西其实也...

    守候i
  • [Go] 使用protobuf进行序列化和反序列化

    陶士涵
  • Struts中API简述

    在使用Struts2的框架的过程中,发现Struts2和Servlet的API是解耦合的。

    木瓜煲鸡脚
  • 干货 | 初学者入门必看的“知识图谱”解读(中)

    本系列参考了市面上已知的,几乎全部“知识图谱”相关文章,并总结提炼出一套适合初学者入门的“知识图谱”的知识体系,希望大家能有所收获。

    AI研习社
  • Html|Vue实战小项目-购物车

    在很多电商网站中,都有一个非常重要的功能,那就是购物车。接下来将使用Vue.js实现一个简易的购物车项目。实现的功能有全选或选择部分商品、计算总价、对商品数量进...

    算法与编程之美
  • Flutter SDK变更后的正确处理方式

    网上有些方法用了未必有效。比如有说直接修改项目中的.packages文件,改完后可能还会有问题。

    IT晴天

扫码关注云+社区

领取腾讯云代金券